@charset "UTF-8";

@media print,screen {
	/* 初期化 */
	* {
		border: 0;
		outline: 0;
		margin: 0;
		padding: 0;
	}
	body {
		font-size: clamp(14px, 2.9vw, 32px);
		line-height: 1.8em;
		letter-spacing: 0.05em;
		font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
		font-weight: 500;
		color: #333;
	}
	a {
		color: #333;
		text-decoration: underline;
	}
	a img {
		border: 0;
	}

	img {
		max-width: 100%;
		height: auto;
		opacity: 0;
		transition: opacity 0.5s ease-in-out;
	}
	button {
		padding: 5px 10px;
		border-radius: 5px;
		cursor: pointer;
	}

	/* デザイン共通 */
	#spcover {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		z-index: 9;
		cursor: pointer;
		display: none;
	}
	body.toggled-on #spcover {
		display: block;
	}
	.wrapper {
		max-width: 1200px;
		margin: 0 auto 20px;
	}

	/* ヘッダー */
	.header_logo {
		background: #D01277;
		text-align: center;
		padding: 8px;
	}
	.header_logo img {
		display: inline-block;
		vertical-align: middle;
		line-height: 1;
	}
	.header {
		background: url(../images/header.png) no-repeat center left / cover;
		position: relative;
	}
	.header:after {
		content: "";
		display: block;
		padding-top: 66.6%;
	}
	.header_sentense {
		position: absolute;
		left: 4%;
		top: 6%;
		width: 50%;
	}
	.header_toiawase {
		position: absolute;
		left: 2%;
		bottom: -5%;
		width: 96%;
		text-align: center;
	}
	.header_toiawase img {
		max-width: 78vw;
	}
	.header a {
	}
	.header .header_sentense img[src*="_sentense"][src*="_yoko"] {
		display: none;
	}

	.notice1,
	.notice2 {
		text-align: center;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: -1;
	}
	.notice1 > div,
	.notice2 > div {
		padding: 0 2%;
		text-align: center;
	}
	.notice1:before,
	.notice2:before {
		content: "";
		display: block;
		position: absolute;
		top: 100%;
		width: 100%;
		height: 15%;
		z-index: 1;
		background: url(../images/notice1_arrow.png) no-repeat top center / contain;
	}
	.notice2:before {
		background-image: url(../images/notice2_arrow.png);
	}
	.notice1:after,
	.notice2:after {
		content: "";
		display: block;
		padding-top: 9%;
	}
	.notice1 {
		padding-top: 1%;
		background: #fff9b1;
		color: #eb67a2;
		font-weight: 700;
		font-size: 104%;
		letter-spacing: -0.1em;
	}
	.notice2 {
		background: #fff135;
		z-index: -2;
	}
	.notice1 img,
	.notice2 img {
		display: block;
	}
	.price {
		text-align: center;
	}
	.price img {
		padding: 3% 2% 1%;
		width: 96%;
	}

	.free_dial {
		text-align: center;
	}

	svg.awa {
		margin-top: -6%;
		display: block;
		position: relative;
		z-index: -1;
	}
	svg.awa + section {
		margin-top: -1px;
	}
	svg.awa.blue path {
		fill: #7ecef4;
	}
	.items {
		background: #7ecef4;
		padding: 80px 0;
	}

	svg.awa.lightblue {
		z-index: 1;
		margin-top: -10%;
	}
	svg.awa.lightblue path {
		fill: #bef4ff;
	}
	svg.awa.white {
		z-index: 1;
		margin-top: -10%;
	}
	svg.awa.white path {
		fill: #ffffff;
	}
	.flow {
		background: #bef4ff;
		padding: 80px 0;
		text-align: center;
	}
	.toiawase {
		background: #fff;
		padding: 80px 0;
		text-align: center;
	}
	section:last-of-type {
		padding-bottom: 0;
	}

	.item_list {
		align-items: flex-start;
		justify-content: flex-start;
		width: 96%;
		margin: 0 2% 8%;
	}
	.item_list > div {
		flex-basis: 46%;
		margin: 0 2% 4%;
		text-align: center;
	}

	/* ナビゲーション */
	body .nav {
		display: none;
		position: absolute;
		top: 112px;
		left: 0;
		width: 94%;
		padding: 0 3% 15px;
		background: #222a35;
	}
	body.toggled-on .nav {
		display: block;
	}
	.nav h3 {
		font-size: 100%;
		text-align: center;
		margin: 5px 0 2px;
	}
	.nav ul {
		list-style-type: none;
		margin: 0;
	}
	.nav ul li {
		border-bottom: 1px dotted #ccc;
	}
	.nav ul li:last-of-type {
		border-bottom: 0;
	}
	.nav ul li a {
		background: #fff;
		color: #222a35;
		transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
		display: block;
		padding: 10px 15px;
		font-weight: 700;
		font-size: 95%;
		text-decoration: none;
	}
	.nav ul li.selected a,
	.nav ul li a:hover,
	.nav ul li a:focus {
		background: #222a35;
		color: #ffffff;
	}
	button.menu-toggle {
		background: transparent;
		color: #fff;
		display: block;
		width: 70px;
		height: 70px;
		position: absolute;
		right: 10px;
		top: 20px;
		
	}
	button.menu-toggle span {
		transition: opacity 0.2s ease-in-out;
	}
	body.toggled-on button.menu-toggle span {
		opacity: 0;
	}
	button.menu-toggle:before,
	button.menu-toggle:after {
		content: "";
		display: block;
		width: 50px;
		height: 3px;
		background: #fff;
		transition: all 0.2s ease-in-out;
	}
	body.toggled-on button.menu-toggle:before {
		transform: rotate(45deg);
/*		margin-top: 20px;*/
	}
	body.toggled-on button.menu-toggle:after {
		transform: rotate(-45deg);
		margin-top: -18px;
	}

	/* コンテンツ */
	h1 {
		text-align: center;
		line-height: 1.5;
		margin-bottom: 25px;
		font-size: 140%;
	}
	h2 {
		text-align: center;
		line-height: 1.5;
		margin: 0 3% 36px;
	}
	h3 {
		text-align: center;
		line-height: 1.5;
		font-weight: 500;
		font-size: 140%;
		margin: 0 4% 8px;
	}
	p {
		line-height: 1.6;
		margin: 0 6% 20px;
		opacity: 0;
		transition: opacity 0.5s ease-in-out;
	}

	.notice {
		font-size: 110%;
		margin: 0 6% 48px;
	}
	h3 + .notice {
		margin-bottom: 0px;
	}
	.explain {
		font-size: 80%;
		text-align: left;
		width: max-content;
		margin: 0 auto 20px;
		max-width: 92%;
	}
	.flow_animation {
		transition: background-position 8.0s ease-in-out;
		transition-delay: 1.0s;
		background-position: 0 -100vh;
	}
	.flow_animation img {
		display: block;
	}
	p.flow_animation[style*="opacity"] {
		background: linear-gradient(to right, transparent 0%, transparent 11.9%,#7ECEF4 12%, #7ECEF4 16.9%,transparent 17%,transparent 100%) no-repeat;
	}

	/* フッター */
	.footer_logo {
		margin: 12px 0 32px;
	}
	.fixed_tel {
		position: fixed;
		bottom: -100%;
		left: 0;
		width: 100%;
		z-index: 2;
		text-align: center;
		transition: bottom 0.3s ease-in-out;
	}
	.fixed_tel.disp {
		bottom: 0;
	}
}

@media print,screen and ( min-width: 768px ) {
	/* デザイン共通 */
	#spcover {
		display: none!important;
	}

	/* ロゴ */
	.flex_box .logo {
		width: 250px;
		flex-basis: 250px;
	}

	.header {
		max-height: 90vh;
		max-height: calc( 100vh - 90px );
	}

	/* ナビゲーション */
	button.menu-toggle {
		display: none;
	}
	.flex_box .nav,
	body.toggled-on .nav {
		display: block;
		position: static;
		padding: 0;
		width: calc( 100% - 250px );
		flex-basis: calc( 100% - 250px );
	}
	.flex_box .now_time,
	body.toggled-on .now_time {
		position: fixed;
		right: 0;
		top: 0;
	}
	.nav h3 {
		margin-top: 20px;
		margin-right: 10px;
		text-align: right;
	}
	.nav ul li {
		border: 1px solid #fff;
	}
	.nav ul li:last-of-type {
		border: 1px solid #fff;
	}
	.nav ul li a {
		padding: 5px 15px;
		text-align: center;
	}
	.nav > ul > li {
		flex: 1;
		margin: 0 10px;
		position: relative;
	}
	.nav > ul > li > ul {
		position: absolute;
		top: 100%;
		left: 0;
		display: none;
		padding: 10px 0 0 0;
		width: 100%;
	}
	.nav > ul > li:hover > ul {
		display: block;
	}
	.nav > ul > li > ul li {
		border: 1px solid #222a35 !important;
	}

	h1 {
		font-size: 180%;
	}

	.item_list > div {
		flex-basis: 29%;
	}
	.fixed_tel img {
		width: 500px;
	}


}
/*
@media print,screen and ( min-width: 768px ) and ( max-height: 740px ) {
	.header .header_sentense {
		height: 70%;
		width: auto;
	}
	.header .header_sentense img {
		height: 100%;
	}
	.header .header_toiawase {
		height: 25%;
		bottom: -3%;
	}
	.header .header_toiawase img {
		height: 100%;
	}
}
@media print,screen and ( min-width: 768px ) and ( max-height: 450px ) {
	.header .header_toiawase {
		width: auto;
	}
	.header .header_sentense  {
		width: 50%;
	}
	.header .header_sentense img[src*="_sentense"] {
		display: none;
	}
	.header .header_sentense img[src*="_sentense"][src*="_yoko"] {
		display: block;
		width: auto;
	}
}
*/
@media (min-aspect-ratio: 59/41) {
/*
	.header .header_sentense {
		height: 70%;
		width: auto;
	}
	.header .header_sentense img {
		height: 100%;
	}
	.header .header_toiawase {
		height: 25%;
		bottom: -3%;
	}
	.header .header_toiawase img {
		height: 100%;
	}
	.header .header_toiawase {
		width: auto;
	}
*/
	.header .header_sentense  {
		width: 40%;
	}
}
@media (min-aspect-ratio: 125/74) {
	.header .header_sentense  {
		width: 30%;
	}
}
@media (min-aspect-ratio: 124/63) {
	.header {
		background-position-x: 0;
		background-size: 112vw auto;
	}
	.header .header_sentense  {
		top: 13%;
		width: 55%;
	}
	.header .header_sentense img[src*="_sentense"] {
		display: none;
	}
	.header .header_sentense img[src*="_sentense"][src*="_yoko"] {
		display: inline;
	}
	.header_toiawase {
		left: 3%;
		width: 60%;
	}
	.header_toiawase img {
/*		height: 12%;*/
		width:100%;
	}
}
@media (min-aspect-ratio: 171/64) {
	.header .header_sentense  {
		top: 7%;
	}
	.header_toiawase {
		left: 5%;
		width: 50%;
	}
}

@media print,screen and ( min-width: 1200px ) {
	.wrapper {
		max-width: 1400px;
	}
}

@media print,screen and ( min-width: 1800px ) {
	.wrapper {
		max-width: 1700px;
	}
}