@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap&subset=japanese');
/*--------------------------------
初期設定
---------------------------------*/
html {
	overflow-y:scroll;font-size: 62.5%;
} /* 1.6rem=16px */
body {
	width: 100%;
	color: #231815;
	font-family: 'Noto Sans JP', sans-serif;
  	/*font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;*/
  	font-display: swap;
	line-height: 1;
	word-break: break-all;
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	letter-spacing: 1px;
	min-width: 320px;
	padding: 0px;
	  -webkit-font-smoothing: antialiased;
}
.main section, main ul li { line-height:1.6}
p, ul,ul li, ol,ol li, dl,dl dt, dl dd{margin:0; padding:0; font-size:1.6rem}
ul li,
ol li{ margin:0; padding:0; list-style-type:none}
table{ width:100%; border-collapse: collapse; border-spacing: 0; box-sizing:border-box}
table th{ font-weight:bold;}
table th,table td { padding:10px; box-sizing:border-box; line-height:1.6; font-size:1.6rem;}
a {transition: opacity 0.5s ease-out;transform: rotate(0.001deg); color: #231815; text-decoration:none}
a:hover{ transform: rotate(0.001deg);text-decoration:none;}
img {max-width: 100%;height: auto;}
.f14{ font-size:1.4rem}
.f15{ font-size:1.5rem}
.ib{ display:inline-block}
.ib2{ display:inline-block!important}
.f-l{ float:left}
.f-r{ float: right}
.clear{ clear:both}
.center{ text-align:center}
.ta_left{ text-align:left}
.ta_right{ text-align:right}
.c-f{ color:#fff!important}
.c-b28{ color:#282828!important}
.c_pink{ color: #ec7083;}
.c_red{ color:#E60012}

a.c_pink{ color: #ec7083; text-decoration: underline;}
/*
a.c_pink.blank{ position: relative; padding-right: 18px; display: inline-block;}
a.c_pink.blank:after{ position: absolute; content: url(../img/icon_blank.svg); width: 12px; height: 11px; top: 0; right: 3px; background: none;}
*/

a.textlink{ color:#ec7083; text-decoration: underline;}
a.blank{ position: relative;}
a.blank:after{
	display: inline;
	content: url(../img/icon_blank.svg);
	margin-left: 4px;
	width: 12px;
	height: 11px;
	background: none;
}

.flexbox{
	display: flex;
}
@media screen and (min-width: 961px) {
	.pc_flexbox{
		display: flex;
	}
}
@media screen and (max-width: 960px) {
	.sp_flexbox{
		display: flex;
	}
}
.right{ text-align:right}
.w100{ width:100%}
.min{  font-family: "Times New Roman", Times, serif, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; transform: rotate(.03deg);}
.mt-45{ margin-top:-45px!important;}
.mt0{ margin-top:0;}
.mt40{ margin-top:40px;}
.mt30{ margin-top:30px;}
.mt20{ margin-top:20px;}
.mt60{ margin-top:60px;}
.mt80{ margin-top:80px!important;}
.mt130{ margin-top:130px!important;}
.mb0{ margin-bottom:0;}
.mb10{ margin-bottom:10px!important;}
.mb30{ margin-bottom:30px!important;}
.mb40{ margin-bottom:40px!important;}
.mb20{ margin-bottom:20px!important;}
.mb50{margin-bottom:50px!important;}
.mb60{margin-bottom:60px!important;}
.mb80{margin-bottom:80px!important;}
.mb90{margin-bottom:90px!important;}
.mb10{ margin-bottom:10px!important;}
.mr20{ margin-right:20px!important;}
.pt0{padding-top: 0px!important;}
.pt10{padding-top: 10px!important;}
.pt20{padding-top: 20px!important;}
.pt30{padding-top: 30px!important;}
.pb0{padding-bottom: 0px!important;}
.pb10{padding-bottom: 10px!important;}
.pb20{ padding-bottom:20px!important;}
.pb40{ padding-bottom:40px!important;}
.pb60{ padding-bottom:60px!important;}
.pb80{ padding-bottom:80px!important;}
.prl80{ padding:10px 80px!important;}
.prl15_80{ padding:15px 80px!important;}
.p40{ padding:40px 0}
.p60{ padding:60px 0}
.ls-nml{ letter-spacing:normal}
.zoom{ position: absolute; right:0; top:0; width:30px; max-width:30px; height:30px; border: none!important;}
.bt-none{ border-top: none!important}
.br-none{ border-radius:0!important}
.sp-none{ display: none}
.bold{ font-weight: 700;}
.c-red{ color: #e60012;}
.alertMsg { color: #E60012; font-weight: bold;}

/*リスト*/
ol.decimal {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: li;
}
ol.decimal li {
  position: relative;
  padding-left: 43px;
  margin: 10px 0 20px 0;
}
ol.decimal li::before {
  counter-increment: li;
  content: counter(li);
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #EC7083;
  font-size: 19px;
  color: #fff;
  line-height: 30px;
  text-align: center;
}

@media screen and (max-width: 960px) {
    ol.decimal li {
        padding-left: 26px;
        margin: 10px 0;
    }
    ol.decimal li::before {
        width: 20px;
        height: 20px;
        top: 2px;
        font-size: 12px;
        line-height: 20px;
    }
}

/* header */
header{ position:relative; padding:0 0 10px; box-sizing:border-box;}
header h1{ padding:0; margin: 0}
header h1 img[src$=".svg"]{ width:135px; height:auto;}
header h1 span{ margin-left:5px; font-weight:normal; font-size:1.1rem; color:#282828; letter-spacing:normal}
.header-inner{ width:100%; text-align:center; top:-60px; font-size:1.2rem; line-height:22px}

.header-wrap{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 12px 60px 12px 20px;
}
.header-inner{
    position: relative;
    top: auto;
    display: flex;
    align-items: center;
    width: auto;
    line-height: normal;
    font-size: 1.2rem;
    text-align:center; 
}

.h-btn-area{ display:flex; justify-content: center;}

.header-inner .guide{ margin-right:15px;}
.header-inner .guide a:before{ 
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 3px;
	left:5px;
    background: url(../img/icon11.svg) left top no-repeat;
    background-size: 22px auto;
}
.header-inner .guide a{ padding:2px 5px 2px 30px}
/*.header-inner .logout{ margin-left:15px;} */
.header-inner .logout a:before{ 
    content: "";
    display: inline-block;
    width: 14px;
    height: 11px;
    position: absolute;
    top: 10px;
	right:5px;
    background: url(../img/logout.svg) right top no-repeat;
    background-size: 14px auto;
}
.header-inner .logout a{ padding:7px 26px 7px 8px}
.header-inner a{display:inline-block; border:1px solid #595757; border-radius:5px; padding:2px 5px; font-weight:bold; box-sizing: border-box; font-size: 1.0rem;}
.header-inner a img{ width:22px; height:22px; vertical-align:middle;}


/* デザインシミュレーター */
/*
.simulatorBody .header-wrap{ max-width:100%; height:auto; padding:15px 0 15px 20px; background:#2d2d2d}
.simulatorBody .simulator-head{ border-bottom:none; background:#f2f2f2}
.simulatorBody header h1{ width:auto; text-align:center}
.simulatorBody header h1 img[src$=".svg"] { height: auto; width: auto;}
.simulatorBody .main{ width: 1000px;  margin: 0 auto;  padding: 0;}
.simulatorBody .contents-wrap {  display: block;  padding: 43px 0;}
.d-simulator-section{ width:930px; margin: 0 auto;} */

/* footer
.footer-nav{ background:#67bde1}
.footer-nav ol{ max-width:1300px; margin:0 auto; padding:20px 10px}
.footer-nav ol li { font-size:1.2rem}
.footer-nav ol li a{ color:#fff}
.footer-nav ol li{ position:relative; display:inline-block; padding-left: 15px;list-style-type:none; ;font-size:1.2rem;}
.footer-nav ol li a{ position:relative;font-weight: normal}
.footer-nav ol li:first-child{ padding-left:0}
.footer-nav ol li:first-child a{ padding-left:20px;}
.footer-nav ol li:first-child a:before{ content:""; position:absolute; top:2px; left:0; display:inline-block; width:12px; height:12px; background:url(../img/footer_icon1.svg) left top no-repeat; background-size:12px auto}
.footer-nav ol li:first-child:after{ content:""; border:none}
.footer-nav ol li:after{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
  margin: -4px 0 0 ;}
.footer-nav ol li:last-child:after{content:"";}
.footer-area{ padding:20px 10px; background:#009cde}
.footer-area .tel-text{  line-height: 1.6; padding-bottom: 15px;font-size:1.2rem; color:#fff; text-align:center; letter-spacing:normal}
.footer-tel{ text-align:center; letter-spacing:2px}
.footer-tel a{ color:#fff; text-align:center; font-size:3rem; font-weight:bold}
.footer-tel img[src$=".svg"]{ width: 40px;  height:auto; margin-right:10px; vertical-align: bottom;}
.footer-area .tel-text2{ max-width:1300px; margin:0 auto;  padding:10px 0 20px; font-size:1.2rem; color:#fff; text-align:center;border-bottom:1px solid #64c1e8;letter-spacing:normal}
.bn-area ul{ display:flex; justify-content: center;flex-wrap: wrap;padding:20px 0 0}
.bn-area ul li{ margin-bottom:20px; padding:0 10px; box-sizing:border-box; width:100%;text-align: center; }
.footer-logo img{ width:150px; height: auto}
.footer-logo{ text-align:center}
footer small{ display:block; font-size:1.2rem; text-align:center; letter-spacing:normal}
 */

.fixbanner{
    position: fixed;
    right: 15px;
    bottom: 15px;
    max-width: 30%;
    width: 250px;
    z-index:3;
}

.nonelogin .fixbanner,
.loginBody .fixbanner{
    display: none;
}

/* footer */
footer{ background:#ec7083;}
footer ul{ display: flex; justify-content: center; flex-wrap: wrap; align-items: center;}
footer ul li{ text-align: center;}
footer .sns_area{ background:#f6f6f5; margin: -1px; padding: 25px 40px;}
footer .sns_area li{ width:20%;}
footer .sns_area .bold{ color: #595757; font-size: 2rem; text-align: center; margin-bottom: 22px;}
footer .link_area{ padding: 57px 20px 17px;}
footer .link_area ul{ justify-content: space-around;}
footer .link_area li{ width: 43%; margin-bottom: 40px;}
footer .navi_area{ padding: 27px 20px 17px 20px}
footer .navi_area ul{ justify-content: center;}
footer .navi_area a{ color:#fff; font-size: 1.4rem}
footer .navi_area li{ position: relative; padding: 0 10px; margin-bottom: 21px;}
footer .navi_area li:before{ content: ""; position: absolute; width: 1px; height: 12px; left: -1px; top: 0; bottom: 0; margin: auto; background: #fff;}
footer .navi_area li:first-child:before{ content: none;}
/* footer .navi_area li:nth-child(3):before{ content: none;} */
footer .privacy{ background:#fff; text-align: center; padding: 23px 0 0px 0}
footer .copyright{ background:#fff; margin: -1px; text-align: center; padding: 13px 0 30px 0}
footer small{ color: #595757; font-size: 1.2rem; letter-spacing: .1rem;}

/* #contents */
#contents{ position:relative;  background:#fff}

/* .main */
.indexBody .main{ padding:0}

/* ボタン */
.btn01{ display:inline-block; padding:8px 40px ; text-align:center; color:#fff; border-radius:8px; background:#ec7083;  box-shadow: 0px 4px #fbe0e4; font-size:1.5rem; font-weight: bold; box-sizing: border-box}
.btn02{ display:inline-block; padding:10px 0; text-align:center; color:#fff; border-radius:8px; background:#ec7083;  box-shadow: 0px 4px #fbe0e4; font-size:1.5rem; font-weight: bold; box-sizing: border-box}
.btn03{ display:inline-block; padding:15px 0 ;border:1px solid #ffda00; box-sizing:border-box; text-align:center; color:#282828; border-radius:8px; background:#ffda00;  box-shadow: 0px 4px #e9e0bf; font-size:2rem; font-weight: bold; box-sizing: border-box}
.btn04{ display:inline-block; padding:20px 0 ;border:1px solid #595757; box-sizing:border-box; text-align:center; color:#595757; border-radius:30px; background:#fff; font-size:1.5rem; font-weight: bold; line-height:1; box-sizing: border-box}
.btn05{ display:inline-block; padding:20px 40px ; text-align:center; color:#fff; border-radius:8px; background:#F2646E; box-shadow: 0px 4px #FF000029; font-size:1.9rem; font-weight: bold; letter-spacing:normal; box-sizing: border-box}

.btn05.quit{ font-size: 1.5rem; font-weight: bold; padding: 16px 0; margin: 0 auto; box-sizing: border-box; color: #fff; border-radius: 8px; background: #595757; box-shadow: none;}
.btn001 .btn02.back{ font-size: 1.5rem; font-weight: bold; padding: 16px 0; margin: 0 auto; box-sizing: border-box; color: #fff; border-radius: 8px; background: #C9CACA; box-shadow: none;}

.buttonStyle{
	display:inline-block;
	padding:8px 40px ;
	text-align:center;
	border-radius:4px;
	font-size:1.5rem;
    font-weight: bold; 
	color: #fff;
	border: 1px solid #ec7083;
	background:#ec7083;
	box-sizing: border-box
}
.buttonStyle.pinkbtn{
	border: 2px solid #ec7083;
	color: #ec7083;
	background: #fff;
}

.buttonStyle.whitebtn{
	border: 1px solid #595757;
	color: #231815;
	background: #fff;
}

.change-btn a.btn2 {
	display: block;
	width: 172px;
	padding: 6.5px 0;
	font-size: 1.5rem;
    font-weight: bold;
	background: #A9A9AA;
	box-shadow: none;
	color: #fff;
	border: none;
	border-radius: 3px;
	margin: 0 auto;
}

.loadingBtn{
    position: relative;
}
.loadingBtn .submit{
    display: inline-block;
    position: relative;
    animation: fadein-out 0.5s ease-out forwards;
    pointer-events: none;
    vertical-align: top;
}
.loadingBtn:after{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
	animation: fadein-top 0.5s ease-out forwards;
	display: inline-block;
	content: url("../img/loading.svg");
	margin-left: 5px;
}
.loadingBtn a{
    pointer-events: none;
}
@media screen and (max-width: 960px) {
	.loadingBtn:after{
        top: 8px;
        transform: translateY(0) translateX(-50%);
	}
}

/* 見出し */
.outline1{ margin:0 0 15px; font-size:2.4rem; letter-spacing:normal;font-weight:normal;}
.outline2{ margin:0; font-size:2rem; letter-spacing:normal}
.outline3{ margin:0 0 30px; padding:15px 30px; background:#fff; font-size:1.5rem; letter-spacing:normal}
.outline4{margin:0 0 20px; font-size:2rem; font-weight:normal;letter-spacing:normal}
.outline5{margin:0 0 20px; font-size:1.8rem;letter-spacing:normal}
.outline6{ margin:0 0 10px ; padding-left:10px; font-size:1.9rem; border-left:3px solid #009CDE; letter-spacing:normal}
.outline7{ margin:0 0 10px ;  font-size:1.6rem; letter-spacing:normal; position:relative;}
.outline8{ margin:0 0 15px ;  font-size:2.7rem; font-weight:normal; letter-spacing:normal}
.outline9{ margin:0 0 30px ;  font-size:1.9rem; letter-spacing:normal}
.outline10{ margin:0 0 10px; padding:12px 30px; background:#D5D9DC; font-size:1.6rem; color:#777777; letter-spacing:normal}
.outline11{ margin:0 0 40px; text-align:center; font-size:3rem; color:#EC7083; letter-spacing:normal}
.outline12{ margin:0 0 30px 30px; padding:10px 20px; width:1180px;  box-sizing:border-box; font-size:1.5rem;background:#E9E9E9; color:#282828; letter-spacing:normal}
.outline13{ margin:0 ; padding:10px 0; font-size:2rem;color:#777777; letter-spacing:normal}

.user-content h3{ padding: 10px; border-bottom: 1px solid #595757; font-size: 1.4rem; margin: 0;}

.icon:before {
    content: "";
    display: inline-block;
    width: 1.2em;
    height:  1.2em;
    background: left top no-repeat;
	background-size:  auto 100%;
    vertical-align: middle;
	margin-right: 4px;
	line-height: 1.2;
}
.icon.icon_tshirt:before {
    background-image: url(../img/icon_lab.svg);
}
.icon.icon_rubent:before {
    background-image: url(../img/icon_ent.svg);
}

/* パンくず */
.breadcrumbs{ margin:0; padding:30px 0; box-sizing:border-box}
.breadcrumbs li{ position:relative; display:inline; padding-left: 10px;list-style-type:none; font-size:1.6rem;letter-spacing: normal;}
.breadcrumbs li a{ position:relative;font-weight: normal; color: #231815;}

.breadcrumbs li:first-child:after{ content:""; border:none}
.breadcrumbs li:after{
  content: '';
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 1px #231815;
  border-right: solid 1px #231815;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 10px;
  left: 0;
  margin: 0px 0 0 ;}
.breadcrumbs li:last-child:after{content:"";}

.crumbs2{ margin-top:0!important; padding-top:30px!important;}

@media screen and (max-width: 360px) {
}

@media screen and (min-width: 481px) {
    .bn-area ul li{ width: 25%; }
	
}

@media screen and (max-width: 960px) {
    ._sp_left{ text-align:left}
}

@media screen and (min-width: 961px) {        
    
    section a.blank, section a.c_pink{ font-weight: 700;}
    a:hover{ opacity:.6} 

    body .buttonStyle:hover, 
    .btn001 a.btn01:hover, 
    .btn001 a.btn02:hover,
    .btn001 a.btn03:hover,
    .btn001 a.btn04:hover,
    .btn001 a.btn05:hover,
    .btn001 a.white_btn:hover{ opacity:.6;}     

    header{ padding:0}
    header,
    #contents,
    footer{ min-width:1300px; overflow: hidden}
    header h1 img[src$=".svg"]{ margin-left:0}
    .header-wrap{ max-width:1200px;margin:0 auto; height:150px;
        display: flex; 
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        position: relative;}
    .header-wrap.borderbtm{border-bottom: 2px solid #595757;}
    .nonelogin .header-wrap.borderbtm{border-bottom: 0;}
    header h1{ width:300px; margin:0;}
    header h1 img[src$=".svg"]{ height:69px; width:280px}
    header h1 span{font-size:1.5rem;}
    .header-inner{ position:absolute; bottom: 10px; right: 0;;display:flex;  align-items: center; width:auto;line-height: normal; font-size:1.4rem;}
    .header-inner a{ width:120px; height:45px; padding:0; line-height:45px;font-size:1.5rem; box-sizing:border-box; color: #595757;}
    .header-inner .guide{ margin:0 10px 0 15px}
    .header-inner .guide a:before{ top: 8px; left:20px;}
    .header-inner .guide a{ padding:0 0 0 25px}    

    .header-inner .logout{ margin:0 5px}
    .header-inner .logout a:before{ content: ""; display: inline-block; width: 18px; height: 16px; position: absolute; top: 15px; right: 10px; background: url(../img/logout.svg) right top no-repeat; background-size: 18px auto;}    
    .header-inner .logout a{ padding: 10px 35px 10px 10px; line-height: normal;}

    /* header */
    .header-inner .logout{
        display: none;
    }
	#mypageTop .header-inner .logout{
		display: block;
	}
	
    .contents-wrap{max-width:1200px;margin:0 auto; }   

    .main{
        width: 1200px;
        margin-right: 20px;
        padding: 0;
        box-sizing: border-box;
    }

    .main-section{ 
        display: flex;
        flex-flow: row-reverse;
        align-items: start;
        justify-content: space-between;
        box-sizing: border-box;
        line-height:1.6}
    .contents-wrap nav{ width:280px; box-sizing: border-box;}

    .outline1{ margin-bottom:36px; font-size:3.0rem; font-weight: bold; text-align: center}
    .outline2{ font-size:2.4rem; letter-spacing:normal}

    .user-content h2{ margin-bottom: 72px;}
    .user-content h3{ font-size: 1.9rem; border-bottom: 1px solid #595757; padding-bottom: 12px; margin-bottom: 72px;}

    /* footer */
    footer .container{ width: 100%; margin: auto;}
    footer .sns_area{ padding: 20px 0}
    footer .sns_area .container{ max-width: 405px; display: table; text-align: left}
    footer .sns_area .bold{ font-size: 2.2rem; padding-bottom: 4px; display: table-cell; vertical-align: middle;}
    footer .link_area{ padding: 80px 0}
    footer .link_area .container{ max-width: 1110px;}
    footer .link_area li{ width: 25%; margin-bottom: 0}
    footer .navi_area{ padding: 27px 0}
    footer .navi_area .container{ max-width: fit-content;}
    footer .navi_area ul{ justify-content: center; gap: 13px;}
    footer .navi_area li{ padding: 0;}
    footer .navi_area li:before{ height: 17px; left: -7px;}
    footer .navi_area li:nth-child(n + 3):before{ content: "";}
    footer .navi_area a{ font-size: 1.7rem}
    footer .copyright{ background:#fff; text-align: center; padding: 21px 0 36px 0}
    footer small { font-size: 1.7rem; letter-spacing: .2rem;}

     /*    
    .footer-nav ol{ padding:30px; box-sizing:border-box}
    .footer-area{ padding:40px 0}
    .footer-area .tel-text{ padding-bottom:20px; font-size:1.6rem; }
    .footer-area .tel-text br{ display:none}
    .footer-area .tel-text2{ padding-bottom:40px; font-size:1.4rem; }
    .footer-tel a{ display:none}
    .footer-tel:after{ content:"0800-600-7007"; color:#fff; font-size:3.8rem; font-weight:bold}
    */
    
    .bn-area ul li{ width: auto; margin-bottom:30px;padding: 0 20px; }
    .section1Body .contents-wrap nav{ display:none}
    .section1Body .contents-wrap{ display:block}
    .section1Body .main{ margin:0 auto}

    .btn01{ font-size:2rem}
    .btn04 { font-size:1.8rem; padding:13px 0; border-radius:22px;}
    .btn001 .btn02.back { max-width: 185px; font-size: 1.8rem; padding: 10px 0; margin-right: 30px;}
    .ver2 .btn05.quit{
        width: 185px;
        max-width: 185px;
        font-size: 1.8rem;
        padding: 10px 0;           
    }
    .change-btn a.btn2 {
        padding: 10px 0;
        font-size: 1.8rem;
    }

    .zoom {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 35px;
        max-width: 35px;
        height: 35px;
    }
}

@media all and (-ms-high-contrast:none){
    body{ transform: rotate(0.001deg);}
    .zoom{top: auto;}

}

@keyframes fadein-top {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}