/******************************************************
 container 
******************************************************/
.container { max-width: 1000px; margin: auto; width: 90%; padding: 50px 0; }

.bg02 { background: #dfe9ef; }

.main ul { font-size: 0px; }
.main ul li { display: inline-block; width: 25%; }
.main ul li .mainBody { position: relative; width: 100%; }
.main ul li .mainBody:before { content: ""; display: block; padding-top: 500px; }
@media screen and (max-width: 1360px) { .main ul li .mainBody:before { padding-top: 140%; } }
.main ul li .mainBody .mainInner { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
.main ul li .mainBody .mainInner .note { font-size: 11px; position: absolute; bottom: 10px; right: 15px; color: #fff; }
.main ul .list01 { background: url(../images/sound/s2-img01@2x.jpg) center center; background-size: cover; }
.main ul .list02 { background: url(../images/sound/s2-img02@2x.jpg) center center; background-size: cover; }
.main ul .list03 { background: url(../images/sound/s2-img03@2x.jpg) center center; background-size: cover; }
.main ul .list04 { background: url(../images/sound/s2-img04@2x.jpg) center center; background-size: cover; }
@media screen and (max-width: 600px) { .main ul .list01 .note, .main ul .list02 .note, .main ul .list03 .note { display: none; } }

.p-title { text-align: center; }
@media screen and (max-width: 600px) { .p-title img { height: 36px; width: auto; } }

.midashiL { text-align: center; }
.midashiL img { margin: 5px; }
@media screen and (max-width: 600px) { .midashiL img { height: 26px; width: auto; } }

.ss-read { text-align: center; font-size: 16px; line-height: 200%; }
.ss-read span { display: inline-block; }
.ss-read.read-2 { margin-top: 25px; }

.midashiM { text-align: center; font-weight: bold; font-size: 24px; color: #0074bb; }
.midashiM span { display: inline-block; }
@media screen and (max-width: 600px) { .midashiM { font-size: 16px; } }

.note { margin-top: 10px; }
.note.nR { text-align: right; }
.note.nC { text-align: center; display: block; }

.midashi01 { margin-top: 25px; margin-bottom: 15px; }

.soundBox { border-top: 1px solid #ddd; margin-top: 50px; padding-top: 50px; }
.soundBox h4 { text-align: center; margin-bottom: 30px; }
@media screen and (max-width: 414px) { .soundBox h4 img { height: 80px; width: auto; } }

.sod-list { font-size: 0px; }
.sod-list li { display: inline-block; vertical-align: top; }

.sodBox { margin-top: 40px; }
.sodBox .sodtitle { font-size: 16px; line-height: 160%; font-weight: bold; padding-bottom: 10px; margin-bottom: 15px; }
.sodBox .sodImg { margin-bottom: 15px; }
.sodBox .sodImg img { width: 100%; height: auto; }
.sodBox .sodread { font-size: 13px; line-height: 180%; }

.sound01 .sodBox .sodtitle { border-bottom: 1px solid #7dbb4d; color: #7dbb4d; }
.sound01 .sod-list li:nth-child(1) { width: 27%; margin-right: 3%; }
.sound01 .sod-list li:nth-child(2) { width: 34%; margin-right: 2%; }
.sound01 .sod-list li:nth-child(3) { width: 34%; }
@media screen and (max-width: 414px) { .sound01 .sod-list li:nth-child(1) { width: 100%; margin-right: 0%; text-align: center; }
  .sound01 .sod-list li:nth-child(1) img { width: 70%; }
  .sound01 .sod-list li:nth-child(2) { width: 100%; margin-right: 0%; }
  .sound01 .sod-list li:nth-child(3) { width: 100%; } }

.sound02 .sodBox .sodtitle { border-bottom: 1px solid #2ca0ce; color: #2ca0ce; }
.sound02 .sod-list li:nth-child(1) { width: 27%; margin-right: 3%; }
.sound02 .sod-list li:nth-child(2) { width: 70%; }
.sound02 .sod-list li:nth-child(3) { width: 48%; margin-right: 4%; }
.sound02 .sod-list li:nth-child(4) { width: 48%; }
@media screen and (max-width: 414px) { .sound02 .sod-list li:nth-child(1) { width: 100%; margin-right: 0%; text-align: center; }
  .sound02 .sod-list li:nth-child(1) img { width: 70%; }
  .sound02 .sod-list li:nth-child(2) { width: 100%; }
  .sound02 .sod-list li:nth-child(3) { width: 100%; margin-right: 0%; }
  .sound02 .sod-list li:nth-child(4) { width: 100%; } }

.shiki { margin-top: 50px; position: relative; }
.shiki img { width: 100%; height: auto; }
.shiki li { position: absolute; z-index: 2; width: 24.5%; }
.shiki li.shikibg { position: relative; z-index: 0; width: 100%; }
.shiki li a { background: #000; display: block; box-shadow: 0 0 8px black; }
.shiki li a:hover img { opacity: 0.7; }
.shiki li.shiki-nei { left: 39%; top: 75%; z-index: 10; }
.shiki li.shiki-fit { left: 4%; top: 28%; z-index: 7; }
.shiki li.shiki-asa { left: 46%; top: 45%; z-index: 9; }
.shiki li.shiki-kin { left: 65%; top: 20%; z-index: 8; }

.tooltip li p { position: absolute; width: 320px; top: -245px; left: 50%; margin-top: -20px; margin-left: -160px; z-index: 5; display: none; }
.tooltip li p .toolBox { border-radius: 10px; position: relative; overflow: hidden; border: 5px solid #fff; border-radius: 5px; display: block; box-shadow: 0 0 8px black; }
@media screen and (max-width: 767px) { .tooltip li p .toolBox { display: none; } }