@charset "utf-8";
/* @import url("https://use.typekit.net/zzn4dic.css"); */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* BASE STYLE
--------------------------------------------------*/
html {
  font-size: 62.5%;
}
body {
	background-color: #fafafa;
	font-family: YakuHanJP_Noto, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1.75;
  color: #3c3c3c;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
a {
  text-decoration: none;
  color: #3c3c3c;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
iframe {
  vertical-align: middle;
}
/* CLEAR-FIX */
.clearfix {
  zoom: 1;
}
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
}


/* モジュール
--------------------------------------------------*/
.sp {
  display: none;
}
@media screen and (max-width:768px) {
	.pc {
		display: none;
	}
	.sp {
		display: inline-block;
	}
}

/* 共通コンテンツ
--------------------------------------------------*/
#container{
	position: relative;
}
.head {
  position: fixed;
	top: 0;
	left: 0;
	background-color: #fff;
	width: 100%;
  z-index: 10;
}
.howTo .head {
	background-color: transparent;
}

.head .logo {
	width: 178px;
	margin: 25px 40px 21px;
}
.head .nav {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-content: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	max-width: 685px;
  height: 88px;
	margin-right: 165px;
	margin-left: 218px;
	font-size: 0;
}
.head .nav > p {
	display: inline-block;
	margin: 6px 0;
	margin-left: 20px;
	line-height: 1;
}
.head .nav a {
	position: relative;
	padding-left: 18px;
	padding-bottom: 2px;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1;
	vertical-align: middle;
}
.head .nav a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: url("../img/common/lnk_arrow_r.svg") no-repeat center/contain;
	display: inline-block;
	width: 11.5px;
	height: 0;
	padding-bottom: 11.5px;
	margin: auto;
}
.head .nav .select a::before {
	background-image: url("../img/common/lnk_arrow_r_on.svg");
}

.head .loginBtn {
	position: absolute;
	top: 0;
	right: 0;
}
.head .loginBtn a{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #4cc1b2;
  width: 92px;
  height: 88px;
	font-size: 12px;
	color: #fff;
	font-weight: 700;
  line-height: 1;
}

.head .spBtn,
.head .spMenu {
	display: none;
}
@media screen and (max-width:800px) {
	.head .nav {
		margin-right: 120px;
	}
}
@media screen and (max-width:768px) {
	.head {
		display: flex;
	}
	.howTo .head {
		justify-content: space-between;
		background-color: transparent;
	}
	.head .logo {
		width: 41.16%;
		margin: 4.667% 18.69% 3.6% 4%;
	}
	.head .nav {
		display: none;
	}

	.head .loginBtn {
		position: relative;
		top: 0;
		right: 0;
		width: 18.075%;
	}
	.head .loginBtn a{
		width: 100%;
		height: 100%;
		font-size: 3.183vw;
	}

	.head .spBtn {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 18.075%;
	}
  .head .spBtn span {
    display: block;
    background-color: #00a791;
    width: 45.7722%;
    height: 3px;
		margin: 6.618% 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .head .spBtn span:nth-of-type(1) {
    -webkit-transform-origin: top left;
    transform-origin: top left;
  }
  .head .spBtn span:nth-of-type(2) {
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
  .head .spBtn span:nth-of-type(3) {
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
  }

	.head .spBtn.active {
		padding-left: 2%;
	}
  .head .spBtn.active span:nth-of-type(1) {
    -webkit-transform: rotate(45deg) scale(1.15, 1);
    transform: rotate(45deg) scale(1.15, 1);
  }
  .head .spBtn.active span:nth-of-type(2) {
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
  }
  .head .spBtn.active span:nth-of-type(3) {
    -webkit-transform: rotate(-45deg) scale(1.15, 1);
    transform: rotate(-45deg) scale(1.15, 1);
  }
  .head .spBtn:focus:not(:focus-visible) {
    outline: 0;
  }
	.head .spMenu {
		position: absolute;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-color: #fafafa;
		width: 100%;
		height: 0;
		margin-top: 18%;
		opacity: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
		overflow: hidden;
	}
	.head .spMenu.active {
		height: calc(var(--vh) - 18vw);
		opacity: 1;
	}
	.head .spMenu .spNav {
		/*background: url("../img/common/menu_line_dot.svg") repeat-x left bottom/auto 2px;*/
		width: 70.667%;
		/*margin-bottom: 10.667%;*/
	}
	.head .spMenu .spNav > p {
		display: block;
		margin-bottom: 9.057%;
		line-height: 1;
	}
	.head .spMenu .spNav > p:last-child {
		margin-bottom: 16.038%;
	}
	.head .spMenu .spNav a {
		position: relative;
		display: block;
		padding-left: 10.377%;
		font-size: 5.053vw;
		font-weight: 500;
		line-height: 1;
		vertical-align: middle;
	}
	.head .spMenu .spNav a::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		background: url("../img/common/lnk_arrow_r.svg") no-repeat center/contain;
		display: inline-block;
		width: 7.17%;
		height: 0;
		padding-bottom: 7.17%;
		margin: auto;
	}
	.head .spMenu .spLnk {
		width: 70.667%;
	}
	.head .spMenu .spLnk > p {
		display: block;
		margin-bottom: 5.66%;
		font-size: 3.733vw;
		font-weight: 400;
		color: #00a791;
		line-height: 1;
	}
	.head .spMenu .spLnk > p.color {
		margin-bottom: 13.208%;
	}
	.head .spMenu .spLnk .ttl {
		position: relative;
		display: block;
		background-color: #fafafa;
		margin-bottom: 6.792%;
		font-size: 3.2vw;
		font-weight: 400;
		color: #3c3c3c;
		line-height: 1;
	}
	.head .spMenu .spLnk .ttl span {
		position: relative;
		display: inline-block;
		background-color: #fafafa;
		padding-right: 14px;
		z-index: 1;
	}
	.head .spMenu .spLnk .ttl::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		background-color: #3c3c3c;
		width: 100%;
		height: 1px;
		margin: auto;
		font-size: 0;
		line-height: 1;
		z-index: 0;
	}
	.head .spMenu .spLnk a {
		position: relative;
		display: inline-block;
		font-size: 3.733vw;
		font-weight: 400;
		color: #00a791;
		line-height: 1;
	}
	.head .spMenu .spLnk p.color a {
		color: #616161;
	}
	
	.howTo .head .backLnk {
		display: block;
		margin: 7.333% 7.333% 5.333%;
		line-height: 1;
	}
	.howTo .head .backLnk a {
		position: relative;
		display: block;
		padding-left: 6.667vw;
		padding-bottom: 0.667vw;
		font-size: 5.067vw;
		font-weight: 500;
		color: #3c3c3c;
		line-height: 1;
	}
	.howTo .head .backLnk a::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		background: url("../img/howto/nav_arrow.svg") no-repeat center/contain;
		display: block;
		width: 5.067vw;
		height: 0;
		padding-bottom: 5.067vw;
		margin: auto;
	}
	.howTo .head .spBtn {
		background-color: #00a791;
		width: 18.133%;
		z-index: 2;
	}
  .howTo .head .spBtn span {
    background-color: #fff;
  }

	.howTo .head .spMenu {
		margin-top: 0;
	}
	.howTo .head .spMenu.active {
		height: 100vh;
	}
	.howTo .head .spMenu .spNav {
		width: 64%;
		margin-bottom: 10.667%;
	}
	.howTo .head .spMenu .spNav > p {
		display: block;
		margin-bottom: 16.667%;
		line-height: 1;
	}
	.howTo .head .spMenu .spNav a {
		padding-left: 6.667vw;
		padding-bottom: 0.667vw;
		color: #3c3c3c;
	}
	.howTo .head .spMenu .spNav a::before {
		background: url("../img/howto/menu_arrow.svg") no-repeat center/contain;
		width: 5.067vw;
		padding-bottom: 5.067vw;
	}
	.howTo .head .spMenu .spNav p:last-child a::before {
		background-image: url("../img/howto/menu_arrow_y.svg");
	}
	.howTo .head .spMenu .spLnk {
		width: 64%;
	}
	.howTo .head .spMenu .spLnk > p {
		margin-bottom: 0;
	}
	.howTo .head .spMenu .spLnk a {
		padding-left: 6vw;
		font-size: 2.933vw;
		font-weight: 700;
		letter-spacing: 0.08em;
	}
	.howTo .head .spMenu .spLnk p:last-child a {
		color: #00a791;
	}
	.howTo .head .spMenu .spLnk a::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		background: url("../img/howto/menu_arrow_back.svg") no-repeat center/contain;
		display: inline-block;
		width: 3.2vw;
		height: 0;
		padding-bottom: 1.6vw;
		margin: auto;
	}
}



.foot{
	margin: 40px 0;
}
.foot .copyright{
	font-size: 12px;
	color: #616161;
	text-align: center;
}

@media screen and (max-width:768px) {
	.foot{
		margin: 5.333% 0;
	}
	.foot .copyright{
		font-size: 3.2vw;
	}
}