.imgPersons{margin-bottom: 32px; text-align: center;} .imgPersons img{display: block; margin-left: auto; margin-right: auto; text-align: center;} .imgPersons dl{padding: 12px 8px 20px;} .imgPersons dl dt{padding-bottom: 10px;} .imgPersons dl dd{font-size: 12px;} .mainImage{ width: 100%; height: 0; padding-top: calc(520 / 1280 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */ background-position: center top; background-size: cover; background-repeat: no-repeat; margin-bottom: 24px; position: relative; } #voice001{background-image: url(../images/voice/imgMain1280_001.jpg);} #voice002{background-image: url(../images/voice/imgMain1280_002.jpg);} #voice003{background-image: url(../images/voice/imgMain1280_003.jpg);} #voice004{background-image: url(../images/voice/imgMain1280_004.jpg);} #voice005{background-image: url(../images/voice/imgMain1280_005.jpg);} #voice006{background-image: url(../images/voice/imgMain1280_006.jpg);} #voice007{background-image: url(../images/voice/imgMain1280_007.jpg);} #voice008{background-image: url(../images/voice/imgMain1280_008.jpg);} #voice009{background-image: url(../images/voice/imgMain1280_009.jpg);} #voice010{background-image: url(../images/voice/imgMain1280_010.jpg);} .profile{position: absolute; padding: 24px; background-color: rgba(255,255,255,.5); display: block;} .profile dt{font-weight: 600;} .profile dd{font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif" ; line-height: 1.6;} .profile dd span{font-family: "a-otf-ud-reimin-pr6n",sans-serif;} .profilePs{ display: none; text-align: center; font-size: 12px; background: url(../images/top/bgMain.png) no-repeat center top; width: 100%; background-size: cover; padding-top: 10px; padding-bottom: 10px; margin-bottom: 16px; } .profilePs dt{font-size: 16px; font-weight: 600;} .profilePs dd{margin-top: 4px;} .profilePs dd span{font-size: 18px;} #lstSchedule{ clear: both; /* background: rgb(20,121,190); background: -moz-linear-gradient(-45deg, rgba(20,121,190,.8) 0%, rgba(48,171,148,.8) 100%); background: -webkit-linear-gradient(-45deg, rgba(20,121,190,.8) 0%,rgba(48,171,148,.8) 100%); background: linear-gradient(135deg, rgba(20,121,190,.8) 0%,rgba(48,171,148,.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1479be', endColorstr='#30ab94',GradientType=1 ); */ background-color: #e5f5f6; margin-bottom: 32px; padding: 20px 8px; } #lstSchedule h3{text-align: center; font-size: 23px; margin-bottom: 24px; background: none; display: block;} #lstSchedule h3::before, #lstSchedule h3::after{content: "◆ ◆"; padding-left: 10px; padding-right: 10px; font-size: 12px; color: #004098;} #lstSchedule table{} #lstSchedule table tr{position: relative; display: block; padding-bottom: 10px;} #lstSchedule table tr::before{ content: ""; border-left: 1px solid #333; width: 1px; position: absolute; left: 10%; top: 8%; bottom: -12%; margin-top: 34px; } #lstSchedule table tr:last-child::before{ content: ""; border-left: none; width: 0; left: 0; margin-top: 0; } #lstSchedule table th{text-align: left; width: 64px;} #lstSchedule table td{padding-bottom: 30px;} #lstSchedule table th, #lstSchedule table td{padding: 8px;} #column{background-color: #ebe6e4; padding-top: 24px; line-height: 0;} #column p{line-height: 1.85; margin-bottom: 20px; font-size: 14px;} #column h3{margin-top: 56px; text-align: center; line-height: 1.3; font-weight: 900; border-bottom: #333 1px solid; padding-bottom: 8px; margin-bottom: 12px; display: block; font-size: 30px;} #column h3 span{font-size: 20px;} @media only screen and (-webkit-min-device-pixel-ratio: 2) { #voice001{background-image: url(../images/voice/imgMain1280_001@2x.jpg);} #voice002{background-image: url(../images/voice/imgMain1280_002@2x.jpg);} #voice003{background-image: url(../images/voice/imgMain1280_003@2x.jpg);} #voice004{background-image: url(../images/voice/imgMain1280_004@2x.jpg);} #voice005{background-image: url(../images/voice/imgMain1280_005@2x.jpg);} #voice006{background-image: url(../images/voice/imgMain1280_006@2x.jpg);} #voice007{background-image: url(../images/voice/imgMain1280_007@2x.jpg);} #voice008{background-image: url(../images/voice/imgMain1280_008@2x.jpg);} #voice009{background-image: url(../images/voice/imgMain1280_009@2x.jpg);} #voice010{background-image: url(../images/voice/imgMain1280_010@2x.jpg);} } /*================== ▼ブレイクポイントのルール▼ -スマホを基本設計にする- *〜479px：SP縦 *480px〜：SP横 *600px〜タブレット *960px〜小型PC *1280px〜大型PC ==================*/ @media screen and (max-width:480px) { /*　画面サイズが480pxまではここを読み込む　*/ .mainImage{margin-bottom: 0;} .profile{display: none;} .profilePs{display: block;} .profilePs dt{font-size: 16px; font-weight: 600;} .profilePs dd{margin-top: 4px;} .profilePs dd span{font-size: 18px;} .pageTitle {font-size: 17px;} #column h3{margin-top: 32px;} #column{margin-bottom: 32px;} } @media screen and (min-width:480px) and ( max-width:600px) { /*　画面サイズが480pxからはここを読み込む　*/ .mainImage{margin-bottom: 0;} .profile{display: none;} .profilePs{display: block;} } @media screen and (min-width:600px) and ( max-width:960px) { /*　画面サイズが600pxから960pxまではここを読み込む　*/ .mainImage{margin-bottom: 0;} .profile{display: none;} .profilePs{display: block;} } @media screen and (min-width:960px) and ( max-width:1140px) { /*　画面サイズが960pxから1280pxまではここを読み込む　*/ #voice001 .profile{top: 8%; right: 8%;} #voice002 .profile{top: 8%; right: 8%;} #voice003 .profile{top: 8%; left: 8%;} #voice004 .profile{top: 8%; left: 8%;} #voice005 .profile{top: 8%; right: 8%;} #voice006 .profile{top: 8%; left: 8%;} #voice007 .profile{top: 8%; right: 8%;} #voice008 .profile{top: 8%; right: 8%;} #voice009 .profile{top: 8%; right: 8%;} #voice010 .profile{top: 8%; right: 8%;} .profile dt{font-size: 30px;} .profile dd{margin-top: 30px;} .profile dd span{font-size: 36px;} } @media screen and (min-width:1140px) { /*　画面サイズが1280pxからはここを読み込む　*/ .mainImage{margin-bottom: 56px;} #voice001 .profile{top: 18%; right: 18%;} #voice002 .profile{top: 18%; right: 18%;} #voice003 .profile{top: 18%; left: 18%;} #voice004 .profile{top: 18%; left: 18%;} #voice005 .profile{top: 18%; right: 18%;} #voice006 .profile{top: 18%; left: 18%;} #voice007 .profile{top: 18%; right: 18%;} #voice008 .profile{top: 18%; right: 18%;} #voice009 .profile{top: 18%; right: 18%;} #voice010 .profile{top: 18%; right: 18%;} .profile dt{font-size: 33px;} .profile dd{margin-top: 32px;} .profile dd span{font-size: 39px;} #column p{font-size: 16px;} }