img{max-width: 100%;height: auto} .font18{font-size: 1.8rem;} .bold{font-weight: bold;} .page_catch{font-size: 1.8rem;letter-spacing: 0.1em;} .pagecon_title{font-size: 2.5rem;font-weight: bold;color: #A30505;border-bottom: 2px solid #A30505;padding-bottom: 8px;margin:60px 0 20px} .pagecon_title2{font-size: 2.5rem;font-weight: bold;color: #A30505;margin:60px 0 30px} .pagecon_title3{font-size: 2.5rem;font-weight: bold;margin:60px 0 30px} @media screen and (max-width: 768px) {/*スマホのスタイル*/ .font18{font-size: 1.6rem;} .page_catch{font-size: 1.5rem;padding: 0 20px;text-align: left} .pagecon_title{font-size: 1.9rem;padding-bottom: 8px;margin:40px 0 20px} .pagecon_title2{font-size: 1.9rem;} .pagecon_title3{font-size: 1.9rem;font-weight: bold;margin:40px 0 30px} } #main_contents{padding-bottom: 60px;} #main_contents .page_title{background: url("../images_n/area_bg.png");padding: 10px 0 30px;color: #fff;margin-bottom: 50px;position: relative} #main_contents .page_title h2{font-size: 3rem;line-height: 1.3; letter-spacing: 0.1em;font-weight: bold} #main_contents .page_title h2 span{font-size: 3rem} #main_contents .page_title .breadcrumb{font-size:1.3rem;text-align:left;padding-bottom: 20px} #main_contents .page_title .breadcrumb a{padding-bottom:1px;border-bottom:1px solid #fff;color: #fff} #main_contents .page_title .illa{position: absolute;width: 10%; right: 1%;top: 70px} @media screen and (max-width: 768px) {/*スマホのスタイル*/ #main_contents{padding-bottom: 30px;} #main_contents .page_title{padding: 30px 0;margin-bottom: 40px;border-top: 2px solid #fff} #main_contents .page_title h2{font-size: 2.2rem} #main_contents .page_title h2 span{font-size: 1.8rem} #main_contents .page_title .illa{width: 18%; position: absolute;right: 3%;top:auto; bottom: -36px} } .content { display: none; } .content.show { display: block; } #school .tab-container{margin: 30px 0} #school .tab-container li{width: 18%;position: relative;background: #000;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;cursor: pointer;border: 4px solid #fff;} #school .tab-container li p img{opacity: 0.5} #school .tab-container li span{ position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);color: #fff;font-size: 2rem;font-weight: bold;} #school .tab-container li img{width: 100%;height: 160px;object-fit: cover} #school .tab-container li.active{ border: 4px solid #A30505;} #school .tab-container li.active:before { content: ''; width: 10px; height: 10px; border-top: solid 2px #A30505; border-right: solid 2px #A30505; position: absolute; left: 0; right: 0;margin: auto; bottom:-16px;transform: rotate(135deg);} @media screen and (max-width: 768px) {/*スマホのスタイル*/ #school .tab-container::after { display: block;content:"";width: 31%;} #school .tab-container li{width: 31%;margin-bottom: 30px} #school .tab-container li span{ font-size: 1.4rem;} #school .tab-container li img{width: 100%;height: 90px;object-fit: cover} #school .page_catch{text-align: left;} } .content-container{background: #FFF6F6;padding: 40px 0} #school .content-container .area_title{font-size: 4rem;font-weight: bold;color: #A30505;} #school .area_copy{font-size: 1.8rem;padding: 20px 0} #school .area_img img{width: 100%; height: 200px;object-fit: cover} #school .area_tab{margin: 30px 0 0} .contents .area_tab li{margin: 0 6px} .contents .area_tab a{display: block;border: 1px solid #000;background: #fff;color: #000;padding: 10px 40px 10px 30px;border-radius: 30px;font-size: 1.3rem;font-weight: bold;margin-top: 12px;position: relative;} .contents .area_tab a::after {content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 10px; width: 7px; height: 7px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg); } .contents .area_tab a:hover{opacity: .5;-webkit-opacity: .5;-moz-opacity: .5;filter: alpha(opacity=50);-ms-filter: "alpha(opacity=50)"} @media screen and (max-width: 768px) {/*スマホのスタイル*/ #school .content-container .area_title{font-size: 2.2rem;} .contents .area_copy{font-size: 1.5rem;text-align: left} .contents .area_img img{height: 160px;} } dl.schoollist{margin-top: 60px} .schoollist dt{text-align: left; font-size: 5rem;font-weight: bold;color: #A30505;} .schoollist dt p{font-size: 1.6rem;color: #000;font-weight: normal} .schoollist dt p.kana{font-size: 2rem;margin-bottom: 20px;font-weight: bold;} .schoollist dd{margin-top: 20px; background: #EED7D7;padding: 5px;text-align: left} .schoollist dd .waku{background: #fff;border-radius: 5px;padding: 20px;cursor: pointer} .schoollist dd .waku:hover{opacity: 0.7} .schoollist dd .s-photo{width: 18%;position: relative;height: 120px} .schoollist dd .s-photo img{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover;} .schoollist dd .s-name{width: 48%;} .schoollist dd .s-name a{font-size: 2rem;font-weight: bold} .schoollist dd .s-info{width: 29%} .schoollist dd .cate{margin-bottom: 12px;} .schoollist dd .setumei{} @media screen and (max-width: 768px) {/*スマホのスタイル*/ dl.schoollist{margin-top: 40px} .schoollist dt{font-size: 2.2rem;} .schoollist dt p{font-size: 1.4rem;} .schoollist dd .waku{overflow: hidden} .schoollist dt p.kana{font-size: 1.8rem;margin-bottom: 15px;} .schoollist dd .s-photo{width:35%;position: relative;height:100px;float: left;margin-right: 4%} .schoollist dd .s-name{width: 100%;margin: 0px 0 16px} .schoollist dd .s-info{width: 60%} .schoollist dd .s-name{-webkit-box-ordinal-group:1;-ms-flex-order:1;-webkit-order:1;order:1;} .schoollist dd .s-photo{-webkit-box-ordinal-group:2;-ms-flex-order:2;-webkit-order:2;order:2;} .schoollist dd .s-info{-webkit-box-ordinal-group:3;-ms-flex-order:3;-webkit-order:3;order:3;} } /*#city*/ #city .area_img{margin: 30px 0} #city .area_img img{width: 100%; height: 260px;object-fit: cover} #city dl.schoollist{margin-top: 0px} #city dl.city_info{margin-bottom: 40px} #city dl.city_info dt{width: 25%;text-align: left; font-size: 1.8rem;font-weight: bold;color: #A30505; } #city dl.city_info dd{width: 72%;border-left: 1px solid #000;padding-left: 30px;text-align: left;text-align: justify; word-break: break-all;} #city table{ width:100%;border-collapse: collapse;border-spacing:0px;table-layout: fixed; } #city table td{padding: 8px;border: 1px solid #000} #city table th{padding: 8px;border: 1px solid #000;width: 14%;background: #FFF6F6;font-weight: bold;} #school .content-container .area_title{font-size: 2.2rem;} @media screen and (max-width: 768px) {/*スマホのスタイル*/ #city .area_img img{height: 160px;} #city dl.city_info dt{width: 100%;text-align: left; font-size: 1.8rem;font-weight: bold;color: #A30505; } #city dl.city_info dd{width: 100%;border-left:none;border-top: 1px solid #000; padding-left: 0px;padding-top: 10px;} #city table td,#city table th{display: block;width: 100%;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;} } /*#school_detail*/ #school_detail .page_catch{font-size: 1.4rem;letter-spacing: 0.1em;font-weight: bold;text-align: left;text-align: justify; word-break: break-all;} #school_detail .shool_photo{padding: 0px 0 0} #school_detail .content-container{background: #FFF6F6;padding: 10px 0;margin-top: 60px} #school_detail .pagecon_title{margin-bottom: 40px} #school_detail .content-container table{ width:100%;border-collapse: collapse;border-spacing:0px;background: #fff; } #school_detail .content-container td{padding: 8px;border: 1px solid #000} #school_detail .content-container th{padding: 8px;border: 1px solid #000;width: 24%;font-weight: bold;background: #eed7d7;white-space: nowrap;} #school_detail .content-container dl{margin-bottom: 40px} #school_detail .content-container dl dt{width: 19%;text-align: left; font-size: 1.8rem;font-weight: bold;color: #A30505; } #school_detail .content-container dl dd{width: 79%;border-left: 1px solid #000;padding-left: 30px;text-align: left;text-align: justify; word-break: break-all;} #school_detail .content-container .couse li p{text-align: left;margin-bottom: 12px} #school_detail .content-container .taizai li{padding: 10px;background: #eed7d7;margin-bottom: 20px} #school_detail .content-container .taizai li.col4{width: 23%} #school_detail .content-container .hiyou{padding-bottom: 40px} #school_detail .content-container .hiyou th{padding: 8px;border: 1px solid #000;width: auto;font-weight: bold;background: #eed7d7;text-align: center} #school_detail .content-container .hiyou td{text-align: center} @media screen and (max-width: 768px) {/*スマホのスタイル*/ #school_detail .content-container{margin-top: 30px} #school_detail .content-container .col2, #school_detail .content-container .col3{width: 100%} #school_detail .content-container dl dt{width: 100%;text-align: left; font-size: 1.8rem;font-weight: bold;color: #A30505; } #school_detail .content-container dl dd{width: 100%;border-left:none;border-top: 1px solid #000; padding-left: 0px;padding-top: 10px;} #school_detail .content-container table{ width:100%;border-collapse: collapse;border-spacing:0px;background:none; } #school_detail .content-container td,#school_detail .content-container th{display: block;width: 100%;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;} #school_detail .content-container .hiyou table {table-layout: fixed;width: 100%;} #school_detail .content-container .hiyou table {display: block;position: relative;margin: auto;text-align: center} #school_detail .content-container .hiyou tablee thead {display: block;float: left;} #school_detail .content-container .hiyou table tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } #school_detail .content-container .hiyou table th, #school_detail .content-container .hiyou table td { display: block; } #school_detail .content-container .hiyou table tr { display: inline-block; } #school_detail .content-container .hiyou table tbody tr { margin-right: -5px; } #school_detail .content-container .hiyou table td{background: #fff} #school_detail .shool_photo{padding: 0px 0 30px} #school_detail .content-container .taizai li.col2, #school_detail .content-container .taizai li.col3, #school_detail .content-container .taizai li.col4, #school_detail .content-container .taizai li.col5{width: 48%} } #school_detail_voice{padding: 0px 0 30px;} #school_detail_voice h2{font-size: 4rem;line-height: 1.4; font-weight: bold; letter-spacing: 0.1em;margin-bottom: 30px;display:inline-block;border-bottom: 1px dotted #000;border-top: 1px dotted #000;padding: 10px 30px;position: relative} #school_detail_voice h2 .illa{position: absolute;right: -100px;top: 0px} #school_detail_voice .txt{font-size: 2rem;font-weight: bold; letter-spacing: 0.1em;margin-bottom: 30px;color: #A30505;position: relative;display: inline-block;padding: 0 45px;} #school_detail_voice .txt:before, #main_voice .txt:after {content: '';position: absolute;top: 50%;display: inline-block;width: 44px;height: 2px;background-color: #A30505;} #school_detail_voice .txt:before {-webkit-transform: rotate(60deg);transform: rotate(60deg);left:0;} #school_detail_voice .txt:after {-webkit-transform: rotate(-60deg);transform: rotate(-60deg);right: 0;} /* #school_detail_voice h3{font-size: 1.5rem;font-weight: bold; letter-spacing: 0.1em;padding-top: 12px;text-align: left;margin-bottom: 30px}*/ #school_detail_voice .photo{position: relative;margin-bottom: 30px} #school_detail_voice .photo:after {content: '';position: absolute;bottom:-30px;left: -20px;background: url("../images_n/illa_post2.svg") no-repeat center center;background-size: contain;width: 124px;height: 76px;} #school_detail_voice li{display: flex;flex-direction: column;margin-bottom: 50px} #school_detail_voice ul.flex--bet::after { display: block; content:""; width: 30%; } @media screen and (max-width: 768px) {/*スマホのスタイル*/ #school_detail_voice{padding: 0px 0 0;} #school_detail_voice h2{font-size: 2rem;display: block;text-align: left} #school_detail_voice h2 .illa{position: absolute;right: 0px;top: -10px} #school_detail_voice .txt{font-size: 1.3rem;}/* #school_detail_voice h3{font-size: 1.3rem;margin-bottom: 0}*/ #school_detail_voice .txt:before, #main_voice .txt:after {width: 26px;} #school_detail_voice ul::after { display: block; content:""; width: 48%; } #school_detail_voice .col3{width: 48%;padding-bottom: 20px}/* #school_detail_voice h3{padding-top: 6px;}*/ #school_detail_voice .photo:after {left: 0px;width:80px;height: 50px;} } .btmore{width: 76%;margin: auto auto 0;border: 1px solid #000;padding: 6px 0} .btmore a{display: block;font-size: 1.4rem;font-weight: bold;letter-spacing: 0.1em;position: relative} .btmore a::after { /* くの字の表示設定 */ content: ""; margin: auto; position: absolute; top: 0; bottom: 0; right: 10px; width: 7px; /* くの字を山なりに見た時、左側の長さ */ height: 7px; /* くの字を山なりに見た時、右側の長さ */ border-top: 1px solid #000; /* くの字を山なりに見た時、左側の太さと色 */ border-right: 1px solid #000; /* くの字を山なりに見た時、右側の太さと色 */ transform: rotate(45deg); /* くの字の向き */ } @media screen and (max-width: 768px) {/*スマホのスタイル*/ .btmore{width: 90%;margin: 0px auto 0;} .btmore a{font-size: 1.4rem;} } @media screen and (max-width: 768px) {/*スマホのスタイル*/ .mobile-scroll {width: 100%; overflow-x: scroll;padding-bottom: 12px} .mobile-scroll img{width: 800px;height: auto} .mobile-scroll table{width: 1100px!important;height: auto} } .map { position: relative; width: 100%; padding-top: 30%; /* 16:9のアスペクト比 */ height: 0; margin: 50px 0} .map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} @media screen and (max-width: 768px) {/*スマホのスタイル*/ .map { padding-top: 60%;} } /*体験談 index*/ #voice_indexpage{} #voice_indexpage .voicelist dt{margin-top: 30px; background: #A30505;text-align: left; font-size: 2.6rem;font-weight: bold; padding: 12px 30px;border-radius: 6px;cursor: pointer;position: relative} #voice_indexpage .voicelist dt.area1{background: #9fa3b9} #voice_indexpage .voicelist dt.area2{background: #e88b83} #voice_indexpage .voicelist dt.area3{background: #f8bb1a} #voice_indexpage .voicelist dt.area4{background: #926ea7} #voice_indexpage .voicelist dt.area5{background: #a29c5a} #voice_indexpage .voicelist dt.active{border-radius: 6px 6px 0 0;} #voice_indexpage .voicelist dt:after{ content: "OPEN ▼";position: absolute;font-size: 14px;right: 12px; top: 50%;transform: translateY(-50%);} #voice_indexpage .voicelist dt.active:after{ content: "CLOSE ▲";} #voice_indexpage .voicelist dd.active{display: block} #voice_indexpage .voicelist dd{padding: 0 20px 20px;display: none} #voice_indexpage .voicelist li{margin-top: 30px;} #voice_indexpage .voicelist li.col4{width: 23%;font-size: 1.3rem} #voice_indexpage .voicelist li h3{font-size: 1.5rem;font-weight: bold; letter-spacing: 0.1em;padding: 12px 0;text-align: left;} #voice_indexpage .voicelist .photo .photo{position: relative;margin-bottom: 30px} #voice_indexpage .voicelist .photo .photo:after {content: '';position: absolute;bottom:-30px;left: -20px;background: url("../images_n/illa_post2.svg") no-repeat center center;background-size: contain;width: 124px;height: 76px;} @media screen and (max-width: 768px) {/*スマホのスタイル*/ #voice_indexpage .voicelist dt{font-size: 2rem;padding: 7px 12px;} #voice_indexpage .voicelist li.col4{width: 48%} } /*体験談詳細 detail*/ #voice_detail .page_catch{font-size: 1.7rem;font-weight: bold;color: #A30505;margin:30px 0 30px} #voice_detail .photo p{text-align: left;margin-top: 12px;font-size: 1.4rem} #voice_detail .pagecon_title{margin:0px 0 20px;text-align: left} #voice_detail .syoukai{margin: 60px 0 0;padding: 30px 0;} #voice_detail .syoukai h3{font-size: 1.5rem;font-weight: bold; letter-spacing: 0.1em;padding-bottom: 12px;} #voice_detail .syoukai .btmore{margin-top:12px} #voice_detail .syoukai .btmore{} #voice_detail .syoukai .btmore a{font-size: 1.4rem;} table.style1{ width:100%;border-collapse: collapse;border-spacing:0px;background: #fff; } table.style1 td{padding: 8px;border: 1px solid #000} table.style1 th{padding: 8px;border: 1px solid #000;width: 24%;font-weight: bold;background: #eed7d7;white-space: nowrap;} @media screen and (max-width: 768px) {/*スマホのスタイル*/ #voice_detail .page_catch{font-size: 1.4rem;} #voice_detail .col2{width: 100%;margin-bottom: 30px} #voice_detail .syoukai h3{padding-bottom: 10px;margin: 0} #voice_detail .syoukai {margin: 0} #voice_detail .syoukai .btmore{margin-top:6px} #voice_detail .syoukai .btmore a{font-size: 1.3rem;padding-right: 40px;padding-left: 12px;margin-left: 1em;text-indent: -1em;} #voice_detail .voicelist dt.active{border-radius: 6px 6px 0 0;} #voice_detail #detail .pagecon_title{position: relative;margin-top: 40px;padding-right: 70px} #voice_detail #detail .pagecon_title:after{ content: "OPEN ▼";position: absolute;font-size: 13px;right: 12px; top: 50%;transform: translateY(-50%);} #voice_detail #detail .pagecon_title.active:after{ content: "CLOSE ▲";} #voice_detail #detail .mT50{margin-top: 0!important} #voice_detail #detail .detail_con{display: none} #voice_detail #detail .flex .col2{order:1;} #voice_detail #detail .flex .col2.photo{order:2;} table.style1 th{white-space: wrap;} }