@charset "UTF-8";

/* ================================================== *
 *
 *    original reset css
 *
 * ================================================== */
* {box-sizing: border-box;}
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, ection, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;background-color: transparent;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} ol, ul {list-style: none;font-size: 0;} ol >li, ul >li {font-size: 16px;}dl {font-size: 0;} dl >dt, dl >dd {font-size: 16px;} blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} table {border-collapse: collapse;border-spacing: 0;} img {max-width: 100%;height:auto;vertical-align: bottom;} button{font: inherit;line-height: 1; background-color: #fff;border: 1px solid #ccc;border-radius: 3px;cursor: pointer;outline: none;padding: 0.5em 1em;appearance: none;} iframe {width: 100%;height: 100%;border: none;display: block;}


/*==============================
 *
 *            base layout
 *
==============================*/
body {
    font-family: "メイリオ", Meiryo, "sans-serif";
    font-size: 16px;
    line-height: 1.4;
    color: #000000;
    background: #f6f6f6;
    padding-top: 72px;
}
#wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
}
#header,
#sub_nav,
#contents,
#footer {
    width: 100%;
    background: #fff;
}
.f_size10 {
    font-size: 10px;
}
.f_size11 {
    font-size: 11px;
}
.f_size12 {
    font-size: 12px;
}
.text_red {
    color: #e5004f;
}

h4{
	font-weight: 900;
    padding: 20px 16px 0px;
}

h5{
	text-align: center;
	background-color: #f6f6f6;
}

/*==============================
 *            header
==============================*/
#header_wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    z-index: 999;
    transition: .3s;
}
#header {
    position: relative;
    height: 72px;
    border-bottom: 0.5px solid #ccc;
}
#header .h_logo {
    height: 72px;
    padding: 28px 8px 0  8px;
}
#header .h_logo img {
    width: 75%;
}
#header .trigger_wrap {
    position: absolute;
    display: inline-block;
    top: 12px;
    right: 8px;
}
#header .trigger_wrap .nav_trigger {
    position: relative;
    width: 48px;
    height: 48px;
    cursor: pointer;
}
#header .trigger_wrap .nav_trigger .trigger_icon {
    position: absolute;
    left: 5px;
    width: 36px;
    height: 3px;
    border-radius: 1px;
    transition-duration: .4s;
}
#header .trigger_wrap .nav_trigger .trigger_icon:nth-child(1) {
    top: 8px; background: #f5e2e7;
}
#header .trigger_wrap .nav_trigger .trigger_icon:nth-child(2) {
    top: 21px; background: #cbe1d4;
}
#header .trigger_wrap .nav_trigger .trigger_icon:nth-child(3) {
    top: 35px; background: #d6d5d5;
}
.active #header .trigger_wrap .nav_trigger .trigger_icon:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
}
.active #header .trigger_wrap .nav_trigger .trigger_icon:nth-child(2) {
    opacity: 0;
}
.active #header .trigger_wrap .nav_trigger .trigger_icon:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
}
#header .h_nav_wrap {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
}
#header .h_nav {
    width: 100%;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition-duration: .6s;
}
.active #header .h_nav {
    height: auto;
    opacity: 1;
}
.active #header .h_nav > li {
    width: 100%;
    background: #595959;
    border-bottom: 2px solid #fff;
    text-align: center;
}
.active #header .h_nav > li > a {
    display: block;
    font-size: 16px;
    color: #fff;
    padding: 1em 0;
    text-decoration: none;
}
.active #header .h_nav > li > a:hover {
    opacity: .6;
}

/*==============================
 *            sub nav
==============================*/
#sub_nav > li {
    display: inline-block;
    width: 33%;
    background: #f0eeed;
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    text-align: center;
    vertical-align: middle;
	box-sizing: border-box;
}
#sub_nav li:nth-child(1),#sub_nav li:nth-child(4) {width: 34%;}
#sub_nav li:nth-child(2),#sub_nav li:nth-child(5) {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}
#sub_nav li > a {
    display: block;
    padding: 16px 0;
    font-size: 13px;
    line-height: 1.2;
    color: #000;
    text-decoration: none;
}
#sub_nav li > a:hover {
    opacity: .6;
}

/*==============================
 *            footer
==============================*/
#footer {
    margin-top: 40px;
}
#footer .f_nav li {
    position: relative;
    width: 100%;
    background: #f0efee;
    border-bottom: 1px solid #fff;
}
#footer .f_nav li:last-child {
    border-bottom: none;
}
#footer .f_nav li:before {
    position: absolute;
    top: 22px;
    left: 16px;
    display: inline-block;
    content: "";
    width: 12px;
    height: 16px;
    background: url("../common_img/arrow01.png") 0 0 / 8px auto no-repeat;
}
#footer .f_nav li > a {
    display: block;
    font-size: 16px;
    color: #000;
    padding: 18px 8px 14px 40px;
    text-decoration: none;
}
#footer .f_address {
    display: block;
    width: 100%;
    padding: 16px 0 40px;
    font-size: 12px;
}
#footer .f_address strong {
	display: block;
	padding: 20px 0 12px;
    font-size: 15px;
	text-align: center;
}

/*==============================
 *            contents
==============================*/
#contents img{
	margin: 0 auto;
	display: block;
}

#contents .box {
    width: 100%;
    margin: 0 auto;
    padding: 8px 16px;
}
#contents .box:first-child{
    padding-top: 16px;
}
.table_a {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #363636;
}
.table_a tr th,
.table_a tr td {
    padding: 10px;
    border: 1px solid #363636;
	vertical-align: top;
}
.table_a tr td.img img {width: 50%;}

/*==============================
 *
 *            top page
 *
==============================*/
#toppage .slider .slick-prev,
#toppage .slider .slick-next {
    position: absolute;
    top: 40%;
    display: block;
    width: 36px;
    height: 72px;
    padding: 8px;
    border: none;
    background-color: transparent;
    z-index: 99;
}
#toppage .slider .slick-arrow img {
    width: 100%;
    height: auto;
    opacity: .6;
}
#toppage .slider .slick-prev {
    left: 8px;
}
#toppage .slider .slick-next {
    right: 8px;
}
#toppage .tel,
#toppage .pickup h2,
#toppage .policy h2 {
    width: calc(100% + 32px);
    margin: 8px auto 8px -16px;
}
#toppage .pickup .pickup_item {
    width: 100%;
    margin: 8px auto;
}
#toppage .pickup .pickup_more {
    width: 45%;
    margin: 16px auto;
}
#toppage .policy h3 {
    margin: 22px auto 16px;
	font-size: 18px;
    font-weight: bold;
	text-align: center;
    line-height: 1.8;
}
#toppage .policy p {
    padding: 0 24px;
    line-height: 1.8;
}
#toppage .fb_area {
    text-align: center;
}
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}
.slide_item {border: 1px solid #eee;}


/*==============================
 *
 *            under page
 *
==============================*/
#cosme .box h2,
#inner .box h2,
#company .box h2,
#contact .box h2 {
    width: calc(100% + 32px);
    margin: 8px auto 0 -16px;
}
#cosme .box h3,
#inner .box h3,
#company .box h3 {
    margin-top: 16px;
}
#cosme .box > h3:nth-of-type(1),
#inner .box > h3:nth-of-type(1),
#company .box > h3:nth-of-type(1) {
    margin-top: 0;
}

.item_list01, .item_list02 {display: flex; flex-wrap: wrap;}

#cosme .item_list01 .item,
#inner .item_list01 .item {
    border: 1px solid #f2f2f2;
    width: 100%;
}
#cosme .item_list01 .item dl dt,
#cosme .item_list01 .item dl dd,
#inner .item_list01 .item dl dt,
#inner .item_list01 .item dl dd {
    display: inline-block;
    width: 50%;
    padding:16px;
    font-size: 14px;
    vertical-align: top;
}
#cosme .item_list01 .item dl dt,
#inner .item_list01 .item dl dt {
    font-size: 12px;
    text-align: center;
}
#cosme .item_list01 .item dl dd {
    font-size: 12px;
    line-height: 1.6;
}
#cosme .item_list01 .item dl dd strong {text-align: center;}
#cosme .item_list02 .item,
#inner .item_list02 .item {
    display: inline-block;
	padding-bottom: 1em;
    width: 50%;
    min-height: 440px;
    background: #fff;
    border: 1px solid #f2f2f2;
	outline: 1px solid #fff;
    padding: 16px 0;
    vertical-align: bottom;
	box-sizing: border-box;
}
#cosme .item_list02 .item dl dt,
#cosme .item_list02 .item dl dd,
#inner .item_list02 .item dl dt,
#inner .item_list02 .item dl dd {
    font-size: 12px;
    text-align: center;
    padding: 0 8px;
    line-height: 1.6;
}
#cosme .item_list02 .item dl dt strong,
#inner .item_list02 .item dl dt strong {
    display: inline-block;
    width: auto;
    min-width: 12em;
    margin-bottom: 16px;
    padding: 6px;
    background: #e8f5ee;
    line-height: 1.4;
    border-radius: 5px;
}
#cosme .item_list01 .item dl dd strong{
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px;
    background: #e8f5ee;
    line-height: 1.4;
    border-radius: 5px;
}
#cosme .item_list02 .item dl dd,
#inner .item_list02 .item dl dd {
    padding-top: 16px;
}
#inner p {
    font-size: 18px;
    margin: 0;
    padding: 16px;
}
#inner p:last-child {
    padding-bottom: 32px;
}
#inner h5 p strong {font-weight: bold;}
#company .pic {
    padding: 16px;
    text-align: center;
}
#company .table_a {
    margin-bottom: 16px;
    font-size: 14px;
}
#company .map {
    width: 100%;
    height: 60vh;
}



#contact #form_wrap {
    margin-top: 16px;
}
#contact #form input,
#contact #form textarea {
    width: 100%;
    margin: 0;
    padding: 8px;
    background: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
}
#contact #form button {
    width: 100%;
    margin-top: 16px;
    padding: 16px;
    background: #aaa;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
    color: #fff;
}
#contact #form button:hover {
    opacity: .6;
}
#contact #form input:focus,
#contact #form textarea:focus {
    outline: none;
    border: 1px solid #666;
    -webkit-transition: all .3s;
    transition: all .3s;
}
#contact #form dl dt {
    padding-top: 16px;
}
#contact .back {
    text-align: center;
}
#contact .back a button {
    width: 100%;
    margin-top: 16px;
    padding: 16px;
    background: #aaa;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
    color: #fff;
}

.map2 {
    max-width: 600px;
    height: 60vh;
	text-align: center;
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 200px;
}

.renewal{
	margin: 20px;
}

.big{
	font-size: 1.5em
}

/*==============================
 *
 *            renewal 2023/04
 *
==============================*/
.tith301 {
margin: 10px 0 8px !important;
padding: 1.4em 0;
font-weight: bold;
text-align: center;
background-color: #f9eef1;}

.dl01 {text-align: center;}

.dl01 dt {
padding: 28px 0 12px;
border-top: 3px solid #eee;
box-sizing: border-box;}

.dl01 dd {font-size: 30px;}

.dl01 dd a {
display: inline-block;
padding-left: 48px;
text-decoration: none;
color: #000;
background: url("../common_img/icon0101.png") 0 center / 32px auto no-repeat;}

.txt01 {
margin-top: 4px !important;
padding: 0 !important;
font-size: 13px !important;
text-align: center;
background-color: #fff !important;}

.txt02 {
margin: 20px auto 24px !important;
padding: 20px 0 0 !important;
width: 70%;
font-size: 13px !important;
text-align: center !important;
background-color: #fff !important;
border-top: 1px solid #ddd;}

.txt02 span {
padding-left: 28px;
background: url("../common_img/icon0102.png") 0 center / 16px auto no-repeat;}

.btn01 a {
display: block;
margin: 0 auto;
padding: 10px 0;
width: 70%;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000;
background: url("../common_img/arrow01.png") 90% center / 8px auto no-repeat;
background-color: #f0efee;
border-radius: 30px;}

.fm {font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;}

.mt8 {margin-top: 8px;}
.mt24 {margin-top: 24px;}
.mb8 {margin-bottom: 8px;}
.mb16 {margin-bottom: 16px;}









/*==============================
 *
 *          美容技術等 /biyou/index.html
 *
==============================*/

.inner {
width: calc(100% - 50px);
max-width: 1000px;
margin: 0 auto;}

section.cont-wrapper.cpmponent .cont-top h4 {
padding: 1.6em 0 0 0;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
font-size: 22px;
letter-spacing: 0.15em;
font-weight: 500;
line-height: 1.928571429;
color: #dd1f23;
background-color: #fff;}


section.cont-wrapper.cpmponent .cont-top ul {margin-top: 20px;}

section.cont-wrapper.cpmponent .cont-top ul li {
height: 60px;
background-color: #faf8f5;
font-size: 18px;
letter-spacing: 0.1em;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
font-weight: 500;
margin-bottom: 12px;
padding: 18px 46px;
padding-right: 0;
position: relative;}

section.cont-wrapper.cpmponent .cont-top ul li:before {
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
background-image: url(https://c-yobouigaku.com/images/curriculum/icn_check.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;}

section.cont-wrapper.cpmponent .cont-top p {
font-size: 15px !important;
letter-spacing: 0.1em;
line-height: 1.9;
margin-top: 60px;
background-color: #fff !important;}

section.cont-wrapper.cpmponent .cont-top .sub-cont {
border: 1px solid #e2e2e2;
margin-top: 30px;
padding: 30px 20px 20px;
position: relative;
}

section.cont-wrapper.cpmponent .cont-top .sub-cont .cont .text-cont em {
font-size: 20px;
letter-spacing: 0.1em;
font-weight: 500;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
color: #dd1f23;
display: block;
padding-bottom: 19px;
border-bottom: 1px solid #dd1f23;
padding-left: 20px;
position: relative;
}

.img-cont img {width: 80%; height: auto;}

.inner img {
max-width: 100%;
height: auto;
vertical-align: bottom;}

section.contents {
margin-top: 100px;
position: relative;}

.sec-title {
margin-bottom: 30px;
text-align: center;
color: #dd1f23;}

.sec-title.efect {
position: relative;
padding-bottom: 20px;
border-bottom: 1px solid #dd1f23;}

.sec-title.efect:before {
content: "";
width: 22px;
height: 23px;
position: absolute;
top: -37px;
left: 50%;
background-image: url(https://c-yobouigaku.com/images/component/icn-efec.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transform: translateX(-50%);}

.sec-title.efect .ja {
font-size: 22px;
letter-spacing: 0.15em;
line-height: 1.391304348;}

.sec-title .en {
display: block;
margin-top: 10px;
letter-spacing: 0.1em;}

section.contents ul {
flex-direction: column;
margin-top: 45px;}

section.contents ul li {
padding: 25px 29px 20px;
border: 1px solid #faf8f5;}

section.contents ul li:nth-of-type(odd) {background-color: #faf8f5;}

section.contents ul li h4 {
font-size: 18px;
letter-spacing: 0.1em;
font-weight: 500;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
padding: 0 0 10px 25px;
border-bottom: 1px solid #dd1f23;
position: relative;
line-height: 1.555555556;}

section.contents ul li h4:before {
content: "";
width: 10px;
height: 10px;
position: absolute;
top: 9px;
left: 0;
background-color: #dd1f23;}

section.contents ul li p {
padding: 13px 0 0 0 !important;
font-size: 15px !important;
letter-spacing: 0.1em;
line-height: 2.133333333;}

section.contents .img {margin-top: 40px;}

.course {margin-top: 100px;}

section.course .cont .text-cont h4 {
padding: 0;
font-size: 22px;
line-height: 1.565217391;
letter-spacing: 0.1em;
font-weight: 600;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;}

section.course .cont .text-cont > div {margin-top: 25px;}

section.course .cont .text-cont p {
font-size: 15px !important;
letter-spacing: 0.1em;
line-height: 2.133333333;
margin-top: 20px;}

section.course .about {margin-top: 25px;}

section.course .about__cont {
display: flex;
flex-direction: column;
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 1px solid #e2e2e2;}

section.course .about__cont:nth-of-type(2) {
border-bottom: none;
margin-bottom: 0;}

section.course .about__cont span.title {
background-color: #969696;
color: #fff;
width: 100%;
height: 35px;
padding: 8px 0 8px 10px;}

section.course .about__cont span {
font-size: 18px;
letter-spacing: 0.1em;}

section.course .about__cont span.text {
padding: 15px 0 0;
line-height: 1.777777778;}

section.course .about .comments {
margin-top: 10px;
padding-left: 1em;
font-size: 13px;
text-indent: -1em;
line-height: 1.8;
letter-spacing: 0.05em;}