@charset "UTF-8";
/* lp common.css */

/*========= common ===============*/
/* font */
body {
  width: 100%;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  margin: 0 auto;
  color: #000;
}
/* blk */
.sp_blk  { display:block; }
.pc_blk  { display:none; }

.flex_box.sp_blk  { display:block; }
.flex_box.pc_blk  { display:none;  }

/* br */
.sp_br    { display:inline; }
.pc_br    { display:none; }
.tab_br   { display:none; }

/* flex_box */
.flex_box { display:flex; }




/*========= ヘッダーのためのCSS ===============*/
header * { 
    font-family: 'Noto Sans JP';
    color: initial;
    text-decoration: none; 
    box-sizing: border-box;
    border-collapse: collapse;
}
header .flex_box {
    display:flex;
    flex-wrap: nowrap;
}
header {
    width: 100%;
    height: 89px;
    position: fixed;
    top:  0;
    left: 0;
    border-top: 4px solid #00a0dc;
    background-color: rgba(255,255,255,.9);
    z-index: 9999;
}
.header_wrap  {
    width: 100%;
    height: 85px;
    justify-content: space-between;
    padding: 0 20px;
}
/* --- 左のロゴと文章 --- */
header .logo_wrap {
    max-width: 370px;
    align-items: center;
}
/* ロゴ */
header .logo_wrap .header_logo,
header .logo_wrap img,
header .logo_wrap svg {
    height: 55px;
    height: min(5.5vw,55px);
}
header .logo_wrap .header_logo {
    margin-right: 20px;  
}
/* 文 */
header .logo_wrap h1 {
    font-size: 12px;
    font-size: min(1.2vw,12px);
}
/* --- 右のお問い合わせリンク --- */
header .headerInfo_wrap {
    flex-wrap: nowrap;
    align-items: center;
}
/* ボタン */
header .infoBtn_wrap {
    margin-right: 10px;
}
header div.btn {
    font-size: 16px;
    font-size: min(1.6vw,16px);
    font-weight: bold;
    text-align: center;
}
header div.btn a {
    height: 6.5vw;
    max-height: 65px;
    padding: 10px 20px;
    padding-left:  min(2vw,20px);
    padding-right: min(2vw,20px);
    letter-spacing: .1em;
    color: #fff;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
header .request_btn {
    margin-right: 10px;
}
header .request_btn a {
    background-color: #82bc3f;
}
header .freeTrial_btn a {
    background-color: #f5643c;
}
/* 電話番号 */
header .phone_info {
    height: fit-content;
}
header .phone_info a {
    line-height: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}
header .phone_info span {
    display: inline-block;
}
header .header_phone {
    width: auto;
    height: auto;
    margin-right: 5px;
}
header .phone_info img,
header .phone_info svg {
    width: 100%;
    height:  0.75em;
    transform: translateY(-.1em);
}
header .phone_info span {
    font-size: 34px;
    font-size: min(3.4vw,34px);
    font-weight: bold;
    font-family: urw-din, sans-serif;
    line-height: 1;
    color: #00a0dc;
}
.st0 {
	fill: #00a0dc;
}

/* 電話番号の下の文章 */
header .phone_underCont {
    font-size: 12px;
    font-size: min(1.2vw,12px);
    font-weight: 500;
    line-height: 1;
    margin-top: 5px;
    text-align: center;
}











/*========= フッターのためのCSS ===============*/
footer {
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: .1em;
    margin-bottom: 48px; /* SP fixed分 */
    padding: 30px 0;
    color: #fff;
    background-color: #2196c9;
}
#footer_white {
	color: #000;
	background-color: #fff;
}
.footer_wrap {
    width: 90%;
    max-width: 550px;
    margin: 0 auto;
}
footer .cont_wrap,
footer .cont_wrap li {
    line-height: 1.7em;
    text-align: center;
}
footer .cont_wrap ul {
    margin-bottom: 15px; /* 20px */
}
footer .cont_wrap li {
   font-weight: bold; 
}
/* footer_logo */
footer .cont_wrap {
    width: 100%;
}
img.footer_logo {
    width: 100%;
    height: auto;
    max-width: 160px;
    margin-bottom: 30px; /* 30px; */
}
/* map */
footer .logoMap {
    flex-wrap: wrap;
}
footer .map_wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
footer .map_wrap.maruyama {
    margin-bottom:  20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #fff;
}
footer .map_wrap.motomachi {
    margin-bottom: 40px;
}
footer .map_wrap ul {
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
}
footer .map_wrap li {
    text-align: center;
}
footer .map_wrap li.class_name {
    line-height: 1;
    margin-bottom: 20px;
}
footer .map {
    width: 100%;
    margin-bottom: 15px;
}
footer .map iframe {
    width:  100%;
    height: 240px;
    height: min(45vw,275px);
}
footer .map_cont {
    font-size: 14px;
    width: 100%;
    font-weight: bold;
    line-height: 1.6em;
    text-align: center;
}
/* footer_nav */
footer .footer_nav,
footer .privacy {
    font-size: 12px;
}
footer .footer_nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 20px;
}
.footer_nav li {
    font-size: 12px;
    font-weight: bold !important;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    margin: 0 20px 10px 0; 
}
footer .privacy a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
}
.footer_nav li:before,
footer .privacy a:before {
    content: "";
    width:   2px;
    height: 20px;
    display: inline-block;
    margin-right: 7px;
    background-color: #fff;
}
footer p.copy {
    font-size: 10px;
    text-align: center;
}
/* add */
footer .logoMap {
    justify-content: center;
}
footer .info_wrap,
footer .info_wrap ul,
footer .info_wrap li {
    width: 100%;
    line-height: 2;
    text-align: center;
}
footer .info_wrap {
    margin-bottom: 25px;
}
footer .info_wrap li {
    font-size: 14px;
}
footer .map_wrap {
    margin-bottom: 30px;
}










@media screen and (min-width:769px) {
	/*==== common ====*/
	/* blk */
	.flex_box.sp_blk  { display:none;  }
	.flex_box.pc_blk  { display:flex;  }

	/* br */ 
	.sp_br    { display:none;   }
	.pc_br    { display:inline; }
	.tab_br   { display:none;   }


	/*==== footer ====*/
	footer {
		margin-bottom: 0 !important; /* SP fixed分 */
		padding: 60px 0;
	}
	footer p  {
		font-size: 16px;
	}
	.footer_wrap {
		max-width: 1100px;
	}
	footer .cont_wrap li {
		text-align: left;   
	}
	footer .flex_box {
		display: flex;
		justify-content: space-between;
	}
	footer .row-reverce {
		flex-direction: row-reverse;
	}
	footer .flex_box.logoMap {
		display: flex;
		flex-wrap: nowrap;
		margin-bottom: 50px;
	}
	.footer_nav,
	footer .privacy {
		font-size: min(1.4vw,14px);
	}
	footer .cont_wrap {
		width: 100%;
		max-width: 160px;
	}
	.footer_nav {
		width: 60%;
	}
	.footer_nav ul {
		margin-bottom: 0;
	}
	.footer_nav li {
		font-size: min(1.4vw,14px);
		margin-right:  20px;
		margin-bottom: 20px;
	}
	.footer_nav li:last-of-type {
		margin-right: 0;
	}
	footer .privacy {
		width: calc(40% - 20px);
	}
	footer .privacy a {
		margin-bottom: 20px;
	}
	footer .cont_wrap {
		font-size: min(1.6vw,16px);
		text-align: left;
	}
	footer .cont_wrap ul {
		line-height: 2em;
		margin-bottom: 0;
	}
	footer .cont_wrap ul li {
		font-size: min(1.6vw,16px);
	}
	/* logo */
	footer img.footer_logo {
		margin-bottom: 60px;
	}
	footer .cont_wrap {
		margin-right: min(5vw,50px);
	}
	/* map */
	footer .class_flex {
		width: calc(100% - min(18%,160px) - min(5vw,50px));
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	footer .class_flex > * {
		width: calc(50% - min(1vw,15px));
	}
	footer .map_wrap {
		width: calc(63% - 20px);
		display: flex;
		flex-wrap: wrap;
		flex-direction: column-reverse;
		margin-bottom: 0;
	}
	footer .map_wrap.maruyama,
	footer .map_wrap.motomachi {
		margin-bottom:  0;
		padding-bottom: 0;
		border-bottom:  0;
	}
	footer .map_wrap li {
		font-size: min(1.6vw,16px);
		text-align: left;
	}
	footer .map_wrap li.class_name {
		font-size: min(1.8vw,18px);
	}
	footer .map {
		margin-bottom: 0px;
	}
	footer .map_cont {
		font-size: min(1.56vw,16px);
		text-align: center;
		margin-bottom: 15px;
	}
	footer .map iframe {
		width:  100%;
		height: 275px;
	}
	/* privacy */
	footer p.copy {
		font-size: 12px;
		text-align: left;
	}
	/* add */
	footer .logoInfo {
		width: calc(37% - 20px);
		justify-content: flex-start;
	}
	footer .info_wrap,
	footer .info_wrap ul,
	footer .info_wrap li {
		width: auto;
		font-size: min(1.7vw,16px);
		text-align: left;
		line-height: 2;
	}
}





@media screen and (max-width:768px) {
	/* ===== ↓ header ↓ ===== */
	.wrap {
		width: 92%;
		margin-left:  auto;
		margin-right: auto;
	}

	header {
		height: 54px;
	}
	header .header_wrap.sp_blk {
		width: 100%;
		height: 54px;
		display: flex !important;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		padding-left:  10px;
		padding-right: 10px;
	}
	/* header内部コンテンツ */
	/* 左のロゴ */
	header .header_logo {
		width: 70px;
	}
	/* 右のボタンたち */
	header .headerInfo_wrap {
		align-items: stretch;
	}
	header .sp_blk .btn a {
		height: 36px;
		max-height: 100%;
		font-size: 14px; 
		padding: 8px; 
	}
	header .sp_blk .phone_btn {
		margin-left: 8px;
	}
	header .sp_blk .phone_btn a {
		background-color: #00a2e0;
		border-radius: 5px;
	}
	header .sp_blk .phone_btn img {
		width:  20px;
		height: 20px;
	}
	/* スマホの時に画面一番下に追従 */
	header .SPfixedBottom {
		width: 100%;
		position: fixed;
		left:   0;
		bottom: 0;
		display: flex !important;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: space-between;
	}
	header .SPfixedBottom > div {
		width: calc(100%/3);
		font-weight: bold;
	}
	header .SPfixedBottom a {
		height: 50px;
		font-size: 14px;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		padding: 10px;
		color: #fff;
	}
	header .SPfixedBottom a:before {
		content: "";
		width:  18px;
		height: 18px;
		display: block;
		margin-right: 5px;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	/* 資料請求・お申し込み・お問い合せ */
	header .SPfixedBottom .fixedL { background-color:#82bc3f; }
	header .SPfixedBottom .fixedC { background-color:#ff5431; }
	header .SPfixedBottom .fixedR { background-color:#00a2e0; }

	header .fixedL a:before {
		background-image: url(../../img/lp/common/SPfixedL.svg);
	}
	header .fixedC a:before {
		background-image: url(../../img/lp/common/SPfixedC.svg);
	}
	header .fixedR a:before {
		background-image: url(../../img/lp/common/SPfixedR.svg);
	}	
}