@charset "UTF-8";

/* =Reset
-------------------------------------------------------------- */
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,section,summary,time,mark,audio,video{margin:0;padding:0;word-wrap:break-word;overflow-wrap:break-word;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:inherit;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:super;}
sub{vertical-align:text-bottom;}
input,textarea,select,button{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select,button{*font-size:100%;}
legend{color:#000;}
img {vertical-align:top;}
input[type="radio"],input[type="checkbox"] {vertical-align: -2px;}
label {cursor: pointer;}


/* =Common
-------------------------------------------------------------- */
body {
	text-align: center;
	line-height: 1;
	-webkit-text-size-adjust: 100%;
}
img {
	max-width: 100%;
	height: auto;
}
input[type="submit"], input[type="reset"], button {
	appearance: none;
	cursor: pointer;
}
/*
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 100;
	src: url('fonts/noto-sans-jp-v53-japanese_latin-100.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 200;
	src: url('fonts/noto-sans-jp-v53-japanese_latin-200.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 300;
	src: url('fonts/noto-sans-jp-v53-japanese_latin-300.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/noto-sans-jp-v53-japanese_latin-regular.woff2') format('woff2');
}
*/
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 500;
	src: url('fonts/noto-sans-jp-v53-japanese_latin-500.woff2') format('woff2');
}
/*
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 600;
	src: url('fonts/noto-sans-jp-v53-japanese_latin-600.woff2') format('woff2');
}
*/
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/noto-sans-jp-v53-japanese_latin-700.woff2') format('woff2');
}
/*
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 800;
	src: url('fonts/noto-sans-jp-v53-japanese_latin-800.woff2') format('woff2');
}
*/
@font-face {
	font-display: swap;
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 900;
	src: url('fonts/noto-sans-jp-v53-japanese_latin-900.woff2') format('woff2');
}



/* =Styles 
-------------------------------------------------------------- */
body {
	font-family: "Noto Sans JP", system-ui;
	color: #333333;
	font-weight: bold;
	background: #fff;
}

a {
	text-decoration: none;
	color: #333333;
}

.num {
	font-family: "Arial", "sans-serif";
}
@media ( min-width: 601px ){
	body {
		font-size: 14px;
	}
	.sp {
		display: none !important;
	}
	.inner {
		max-width: 1000px;
		margin: 0 auto;
		padding: 0 30px;
	}
}
@media ( min-width: 961px ){
	.sptab {
		display: none !important;
	}
}
@media ( max-width: 960px ){
	.pc {
		display: none !important;
	}
}
@media ( max-width: 600px ){
	body {
		font-size: 4vw;
	}
	.pctab {
		display: none !important;
	}
	.inner {
		padding: 0 4vw;
	}
}

/* IE11のみハック */
_:-ms-lang(x)::-ms-backdrop, .selector {

}

:root {
	--yellow: #ffff00;
	--blue: #0086CC;
}

.btn_wrap {
	position: relative;
}
.btn_wrap .btn_subtext {
	position: absolute;
	left: 0;
	right: 0;
	color: #fff;
	margin: 0 auto;
	background: #333333;
	z-index: 1;
	letter-spacing: 0.05em;
}
.btn_wrap .btn_subtext::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	background: inherit;
	clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.btn_wrap .btn a {
	position: relative;
	display: block;
	color: #fff;
	letter-spacing: 0.05em;
	background: #ffac0c;
}
.btn_wrap .btn a::after {
	content: '';
	position: absolute;
	top: 57%;
	transform: translateY(-50%);
	background: url(img/btn_arrow.png)no-repeat center/contain;
}
.btn_wrap a.mypage {
	text-decoration: underline;
	font-weight: normal;
}
.btn_wrap a.mypage:hover {
	text-decoration: none;
}
.gnav .btn_wrap a.mypage {
	color: #fff;
	text-decoration: none;
}
.fixed_btn {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	background: rgba(0, 0, 0, .5);
	z-index: 50;
	transition: opacity .3s, visibility .3s;
	visibility: visible;
}
.fixed_btn.hidden {
	opacity: 0;
	visibility: hidden;
}
@media ( min-width: 601px ){
	.btn_wrap {
		max-width: 500px;
		padding: 19px 0 0;
		margin: 0 auto;
	}
	.btn_wrap .btn_subtext {
		top: 0;
		width: 300px;
		font-size: 22px;
		padding: 0 0 5px;
	}
	.btn_wrap .btn_subtext span {
		font-size: 30px;
	}
	.btn_wrap .btn_subtext::after {
		bottom: -11px;
		width: 16px;
		height: 12px;
	}
	.btn_wrap .btn a {
		font-size: 30px;
		padding: 35px 13px 26px 0;
		border-radius: 10px;
		box-shadow: 2px 3px 6px 0px rgba(56, 56, 56, 0.3);
		margin-bottom: 20px;
	}
	.btn_wrap .btn a::after {
		right: 36px;
		width: 25px;
		height: 25px;
	}
	.btn_wrap a.mypage {
		font-size: 16px;
		padding-right: 20px;
		background: url(img/login.png) no-repeat right center;
		background-size: 14px;
	}
	.gnav .btn_wrap a.mypage {
		background: url(img/login_w.png) no-repeat right center;
		background-size: 14px;
	}
	.fixed_btn .btn_wrap {
		max-width: 810px;
		padding: 0 30px;
		display: flex;
		justify-content: space-between;
	}
	.fixed_btn .btn_wrap .btn a {
		font-size: 25px;
		padding: 25px 13px 25px 0;
	}
	.fixed_btn .btn_wrap .btn a::after {
		right: 20px;
		top: 52%;
	}
	.fixed_btn .btn_wrap .fx_btn1 {
		width: 55%;
		position: relative;
	}
	.fixed_btn .btn_wrap .btn_subtext {
		top: -22px;
		font-size: 18px;
		padding: 0 0 5px;
	}
	.fixed_btn .btn_wrap .btn_subtext span {
		font-size: 26px;
	}
	.fixed_btn .btn_wrap .fx_btn2 {
		width: 43%;
	}
	.fixed_btn .btn_wrap .fx_btn2 .btn a {
		background: var(--blue);
	}
}
@media ( min-width: 961px ){
	.btn_wrap .btn a {
		transition: box-shadow .3s;
	}
	.btn_wrap .btn a:hover {
		box-shadow: 0 0 0;
	}
}
@media ( min-width: 601px ) and ( max-width: 960px ){
	.fixed_btn {
		padding: 30px 0 10px;
	}
}
@media ( max-width: 600px ){
	.btn_wrap {
		width: 80vw;
		padding: 3.0667vw 0 0;
		margin: 0 auto;
	}
	.btn_wrap .btn_subtext {
		top: 0;
		width: 40vw;
		font-size: 3.4667vw;
		padding: 0 0 0.6667vw;
	}
	.btn_wrap .btn_subtext span {
		font-size: 4.5333vw;
	}
	.btn_wrap .btn_subtext::after {
		bottom: -1.3333vw;
		width: 1.8667vw;
		height: 1.3333vw;
	}
	.btn_wrap .btn a {
		font-size: 4.6667vw;
		padding: 5.0667vw 1.3333vw 3.8667vw 0;
		border-radius: 1.3333vw;
		box-shadow: 0.2667vw 0.4vw 0.8vw 0px rgba(56, 56, 56, 0.3);
		margin-bottom: 4vw;
	}
	.btn_wrap .btn a::after {
		right: 7.8667vw;
		width: 4vw;
		height: 4vw;
	}
	.btn_wrap a.mypage {
		padding-right: 5vw;
		background: url(img/login.png) no-repeat right center;
		background-size: 3.5vw;
	}
	.gnav .btn_wrap a.mypage {
		background: url(img/login_w.png) no-repeat right center;
		background-size: 3.5vw;
	}
	.fixed_btn {
		padding: 2vw 0;
	}
	.fixed_btn .btn_wrap {
		width: 92vw;
		display: flex;
		justify-content: space-between;
	}
	.fixed_btn .btn_wrap .btn a {
		font-size: 4vw;
		padding: 4vw 4vw 4.3vw 0;
	}
	.fixed_btn .btn_wrap .btn a::after {
		right: 2.5vw;
		top: 52%;
	}
	.fixed_btn .btn_wrap .fx_btn1 {
		width: 50vw;
		position: relative;
	}
	.fixed_btn .btn_wrap .btn_subtext {
		top: -3.5vw;
	}
	.fixed_btn .btn_wrap .btn_subtext::after {
		height: 1.5vw;
	}
	.fixed_btn .btn_wrap .fx_btn2 {
		width: 40vw;
	}
	.fixed_btn .btn_wrap .fx_btn2 .btn a {
		background: var(--blue);
	}
}
@media ( min-width: 601px ) and (orientation: landscape){
	.fixed_btn {
		padding: 5px 0 10px;
	}
	.fixed_btn .btn_wrap {
		padding: 15px 0 0;
	}
	.fixed_btn .btn_wrap .btn_subtext {
		font-size: 18px;
	}
	.fixed_btn .btn_wrap .btn_subtext span {
		font-size: 24px;
	}
	.fixed_btn .btn_wrap .btn_subtext::after {
		bottom: -6px;
		width: 16px;
		height: 12px;
	}
	.fixed_btn .btn_wrap .btn a {
		font-size: 24px;
		padding: 22px 13px 15px 0;
	}
	.fixed_btn .btn_wrap .btn a::after {
		top: 55%;
	}
}
/* =header
-------------------------------------------------------------- */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	background: #fff;
}
.header .in {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header .logo_wrap {
	display: flex;
	align-items: center;
}
.header .logo_wrap .logo_text,
.header .nav_wrap .nav ul li a {
	font-weight: 500;
}
.header .in .menu_btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}
.header .in .menu_btn span {
	position: absolute;
	left: 0;
	width: 100%;
	background: var(--blue);
}
.header .in .menu_btn span:first-child {
	top: 0;
}
.header .in .menu_btn span:nth-child(2) {
	top: 50%;
	transform: translateY(-50%);
}
.header .in .menu_btn span:last-child {
	bottom: 0;
}
@media ( min-width: 601px ){
	.header {
		box-shadow: 0px -4px 7.2px 2.8px rgba(0, 0, 0, 0.39);
	}
	.header .in {
		height: 70px;
	}
	.header .logo_wrap {
		gap: 0 20px;
	}
	.header .logo_wrap .logo_text {
		font-size: 14px;
		padding: 0 0 3xp;
	}
}
@media ( min-width: 961px ){
	.header .in {
		padding: 0 2.22%;
	}
	.header .nav_wrap {
		display: flex;
		align-items: center;
		gap: 0 30px;
	}
	.header .nav_wrap .nav ul {
		display: flex;
		gap: 0 25px;
	}
	.header .nav_wrap .nav ul li a {
		font-size: 16px;
		padding: 2px 0;
	}
	.header .nav_wrap .nav ul li a:hover {
		border-bottom: 2px solid #1c7ebe;
	}
	.header .nav_wrap .btn {
		width: 120px;
	}
	.header .nav_wrap .btn a {
		position: relative;
		display: block;
		color: #fff;
		font-size: 18px;
		letter-spacing: 0.05em;
		padding: 8px 25px 11px 0;
		border-radius: 10px;
		background: #ffac0c;
		box-shadow: 2px 3.464px 4px 0px rgba(56, 56, 56, 0.2);
		opacity: 1;
		transition: opacity .3s;
	}
	.header .nav_wrap .btn a:hover {
		opacity: .8;
	}
	.header .nav_wrap .btn a::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 11px;
		width: 20px;
		height: 20px;
		transform: translateY(-50%);
		background: url(img/btn_arrow.png)no-repeat center/contain;
	}
}
@media ( min-width: 1201px ) and ( max-width: 1500px){
	.header .nav_wrap .nav ul li a {
		font-size: 12px;
	}
	.header .logo_wrap .logo_text {
		font-size: 10px;
	}
	.header .nav_wrap .nav ul {
		gap: 0 20px;
	}
}
@media ( min-width: 961px ) and ( max-width: 1200px){
	.header .nav_wrap .nav ul li a {
		font-size: 10px;
	}
	.header .logo_wrap .logo_text {
		font-size: 9px;
	}
	.header .nav_wrap {
		gap: 0 15px;
	}
	.header .nav_wrap .nav ul {
		gap: 0 9px;
	}
}
@media ( min-width: 601px ) and ( max-width: 960px ){
	.header .in {
		padding: 0 30px;
	}
	.header .nav_wrap {
		display: none;
	}
	.header .menu_btn {
		display: block;
	}
	.header .in .menu_btn {
		right: 30px;
		width: 40px;
		height: 35px;
	}
	.header .in .menu_btn span {
		height: 4px;
	}
}
@media ( max-width: 600px ){
	.header {
		padding: 2.9333vw 0 4.1333vw;
	}
	.header .in {
		padding: 0 4vw;
	}
	.header .logo_wrap {
		gap: 0 2.8vw;
	}
	.header .logo_wrap .logo {
		width: 24.2667vw;
	}
	.header .logo_wrap .logo img {
		width: 100%;
	}
	.header .logo_wrap .logo_text {
		font-size: 2.9333vw;
		padding: 0 0 0.4vw;
	}
	.header .in .menu_btn {
		right: 4.1333vw;
		width: 5.3333vw;
		height: 4.6667vw;
	}
	.header .in .menu_btn span {
		height: 0.5333vw;
	}
}

/* =gnav
-------------------------------------------------------------- */
.gnav {
	position: fixed;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: var(--blue);
	z-index: 100;
	transition: top .5s;	
}
.gnav.open {
	top: 0;
}
.gnav .in {
	height: 100%;
	overflow: auto;
	box-sizing: border-box;
}
.gnav .gnav_head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.gnav .gnav_head .close {
	color: #fff;
	font-weight: 900;
	cursor: pointer;
}
.gnav .nav ul li a {
	display: inline-block;
	color: #fff;
	font-weight: bold;
}
@media ( min-width: 601px ) and ( max-width: 1499px ){
	.gnav .in {
		padding: 22px 0 60px;
	}
	.gnav .gnav_head {
		padding: 0 30px;
	}
	.gnav .gnav_head .close {
		font-size: 40px;
	}
	.gnav .nav {
		padding: 60px 0 100px;
	}
	.gnav .nav ul li + li {
		margin-top: 60px;
	}
	.gnav .nav ul li a {
		font-size: 40px;
	}
}
@media ( max-width: 600px ){
	.gnav .in {
		padding: 2.9333vw 0 60px;
	}
	.gnav .gnav_head {
		padding: 0 4vw;
	}
	.gnav .gnav_head .logo {
		width: 24.2667vw;
	}
	.gnav .gnav_head .close {
		font-size: 5.3333vw;
	}
	.gnav .nav {
		padding: 26vw 0;
	}
	.gnav .nav ul li + li {
		margin-top: 10.6667vw;
	}
	.gnav .nav ul li a {
		font-size: 5.3333vw;
	}
}


/* =fv
-------------------------------------------------------------- */
.fv .fv_img img {
	width: 100%;
}
.fv .catch_area {
	position: relative;
}
@media ( min-width: 601px ){
	.fv {
		margin-top: 70px;
	}
	.fv .catch_area {
		background: url(img/fv_dotted.jpg)repeat top/ auto;
	}
}
@media ( min-width: 961px ){
	.fv .catch_area {
		padding: 40px 0;
	}
	.fv .catch_area .inner {
		position: relative;
		display: flex;
		justify-content: space-between;
		gap: 0 20px;
	}
	.fv .catch_area .wrap {
		flex: 0 1 450px;
	}
	.fv .catch_area .wrap .img {
		position: absolute;
		top: calc(max(-5.66vw, -60px) + (-1*17px));
		right: -2px;
		width: min(52.3585vw, 555px);
	}
	.fv .catch_area .btn_wrap {
		max-width: 450px;
		margin: min(25.9435vw, 275px) 0 0;
	}
	.fv .catch_area .catch_text .catch_1 {
		margin: -62px 0 65px;
	}
}
@media ( min-width: 601px ) and ( max-width: 960px ){
	.fv .catch_area {
		padding: 14px 0 26px;
	}
	.fv .catch_area .catch_text .catch_1 {
		position: relative;
		right: -1.4667vw;
		width: 55.2vw;
		margin: -5vw 4vw 8vw auto;
	}
	.fv .catch_area .catch_text .catch_2 {
		width: 100%;
		margin-left: auto;
		margin-bottom: 7.33vw;
	}
	.fv .catch_area .wrap .img {
		position: absolute;
		left: 4vw;
		top: -5vw;
		width: 26.1333vw;;
	}
}
@media ( max-width: 600px ){
	.fv {
		margin-top: 13.3333vw;
	}
	.fv .catch_area {
		padding: 5.333vw 0 7.333vw;
		background: url(img/fv_dotted.jpg)repeat top/ 1.3333vw;
	}
	.fv .catch_area .catch_text {
		margin-left: auto;
	}
	.fv .catch_area .catch_text .catch_1 {
		position: relative;
		right: -1.4667vw;
		width: 55.2vw;
		margin: -8vw 4vw 8vw auto;
	}
	.fv .catch_area .catch_text .catch_2 {
		width: 100%;
		margin-left: auto;
		margin-bottom: 7.33vw;
	}
	.fv .catch_area .wrap .img {
		position: absolute;
		left: 4vw;
		top: -5vw;
		width: 26.1333vw;;
	}
}
/* =intro
-------------------------------------------------------------- */
.intro .sec_head .ttl {
    position: relative;
    letter-spacing: 0.05em;
}
.intro .sec_head .ttl .border {
    position: relative;
    display: inline-block;
    z-index: 1;
}
.intro .border {
	position: relative;
}
.intro .sec_head .ttl span {
    display: block;
}
.intro .border::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: var(--yellow);
    z-index: -1;
}
.intro .sec_head .ttl::after, .movie_wrap .text::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    background: var(--blue);
}
.intro .head_box {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.intro .point_list {
	display: flex;
}
.intro .point_list li .text {
	font-weight: 500;
}
.intro .point_list li .text span {
	color: var(--blue);
	font-weight: bold;
}
.intro .box_wrap {
	position: relative;
}
.intro .box {
	display: flex;
	align-items: center;
}
.intro .box_wrap .subtext {
    position: absolute;
    left: 49%;
    right: 0;
    color: #fff;
    background: #333333;
    z-index: 1;
    letter-spacing: 0.05em;
}
.intro .box_wrap .subtext::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: inherit;
    clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.intro .box .square {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: var(--blue);
}
.intro .box .text_wrap .text .strong {
	position: relative;
	display: inline-block;
}
.intro .box .text_wrap .text .strong::before,
.intro .box .text_wrap .text .strong::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1em;
	height: 1em;
}
.intro .box .text_wrap .text .strong::before {
	left: 0;
	background: url(img/text_arrow_left.png)no-repeat center/cover;
}
.intro .box .text_wrap .text .strong::after {
	right: 0;
	background: url(img/text_arrow_right.png)no-repeat center/cover;
}
.intro .box .text_wrap .text .color {
	color: var(--blue);
	font-weight: 900;
	padding: 0 0.3em;
}
@media ( min-width: 601px ){
	.intro {
		padding: 0 0 39px;
	}
	.intro .sec_head {
        background: url(img/bg_dotted.jpg) repeat top / auto;
    }
    .intro .sec_head .ttl {
        margin: 0 0 40px;
    }
    .intro .sec_head .intro_img_wrap {
        padding: 0 0 20px;
        background: url(img/bg_semicircle.png) no-repeat center bottom / cover;
        height: 500px;
        margin-bottom: 130px;
    }
	.intro .inner {
		max-width: 810px;
	}
	.intro .title {
		font-size: 24px;
		line-height: 2;
		margin-bottom: 50px;
	}
	.intro .point_list {
		gap: 0 4%;
		margin: 0 0 40px;
	}
	.intro .point_list li {
		border: 5px solid #b8dbf2;
		flex: 0 0 48%;
		display: flex;
		align-items: center;
        justify-content: space-around;
        box-sizing: border-box;
	}
	.intro .point_list li:nth-child(1) .icon {
		padding: 25px 0 17px;
	}
	.intro .point_list li:nth-child(2) .icon {
		padding: 23px 0 14px;
	}
	.intro .point_list li:nth-child(3) .icon {
		padding: 23px 0 16px;
	}
	.intro .point_list li .text {
		font-size: 17px;
	}
	.intro .point_list li .text span {
		font-size: 26px;
	}
	.intro .box_wrap {
        padding: 19px 0 0;
        margin-top: -19px;
    }
	.intro .box_wrap .subtext {
        top: 0;
        width: 150px;
        font-size: 22px;
        padding: 5px 0 10px;
    }
    .intro .box_wrap .subtext::after {
    	bottom: -11px;
        width: 16px;
        height: 12px;
    }
}
@media ( min-width: 961px ){
	.intro .sec_head {
        padding: 86px 0 0;
    }
    .intro .sec_head .ttl {
        padding: 0 0 42px;
        margin: 0 0 40px;
    }
    .intro .sec_head .ttl .border {
        font-size: 40px;
        margin-top: 20px;
    }
    .intro .border::before {
        width: 91%;
        height: 12px;
        bottom: -6px;
    }
    .intro .sec_head .ttl .small {
        font-size: 40px;
    }
    .intro .sec_head .ttl::after, .movie_wrap .text::after {
        width: 80px;
        height: 4px;
    }
    .intro .intro_img_wrap .contents_img {
    	max-width: 900px;
    	width: 100%;
    	margin: 0 auto;
    	background: #fff;
    	border: 5px solid #b8dbf2;
    	box-sizing: border-box;
    	padding: 40px 80px 60px;
    }
    .intro .head_box {
    	padding: 0 25px;
    	box-sizing: border-box;
    	margin-bottom: 40px;
    }
    .intro .head_box.ver2 {
    	margin-bottom: 0;
    }
    .intro .head_box .img {
    	max-width: 206px;
    }
    .intro .head_box .text {
    	text-align: left;
    	font-size: 18px;
    	line-height: 2;
    }
    .intro .head_box.ver2 .text {
    	text-align: center;
    }
    .intro .head_box .text .big {
    	font-size: 28px;
    	color: #1c7ebe;
    }
	.intro .box {
		gap: 0 6.4%;
		padding: 15px 0 15px 7.7%;
		border: 5px solid var(--blue);
	}
	.intro .box .square {
		font-size: 30px;
		line-height: 1.334;
		width: 115px;
		height: 110px;
	}
	.intro .box .text_wrap .text {
		font-size: 30px;
		letter-spacing: 0.05em;
	}
	.intro .box .text_wrap .text .strong {
		font-size: 30px;
		letter-spacing: 0.2em;
		padding: 0 50px;
		margin: 0 0 5px;
	}
	.intro .box .text_wrap .text .strong .small {
		font-size: 26px;
	}
	.intro .box .text_wrap .text .num {
		font-size: 50px;
	}
	.intro .box .text_wrap .text .small {
		font-size: 24px;
	}
}
@media ( max-width: 960px ){
	.intro .sec_head {
        padding: min(11.4667vw, 86px) 0 0;
    }
	.intro .sec_head .ttl {
        padding: 0 0 min(5.6vw, 42px);
    }
    .intro .sec_head .ttl .border {
        font-size: min(5.3333vw, 40px);
        margin-top: min(2.6667vw, 20px);
    }
    .intro .border::before {
        width: 91%;
        height: min(1.6vw, 12px);
        bottom: max(-0.8vw, -6px);
    }
    .intro .sec_head .ttl .small {
        font-size: min(5.3333vw, 40px);
    }
    .intro .sec_head .ttl::after, .movie_wrap .text::after {
        width: min(10.6667vw, 80px);
        height: min(0.5333vw, 4px);
    }
    .intro .sec_head .intro_img_wrap {
        padding: min(0.4vw, 3px) 0 min(6.6667vw, 50px);
        background: url(img/bg_semicircle_sp.png) no-repeat center bottom / cover;
        height: 40vw;
        margin-bottom: 55vw;
    }
    .intro .intro_img_wrap .contents_img {
    	border: 1vw solid #b8dbf2;
    	box-sizing: border-box;
    	width: 92vw;
    	margin: 0 auto;
    }
    .intro .head_box .img {
    	max-width: 29.2vw;
    }
    .intro .head_box.ver2 .img {
    	max-width: 24vw;
    }
    .intro .head_box .text {
    	text-align: right;
    	font-size: 3vw;
    	line-height: 1.8;
    }
    .intro .head_box .text .big {
    	font-size: 4.8vw;
    	color: var(--blue);
    }
	.intro .point_list {
		order: 2;
	}
	.intro .point_list li .text span {
		display: block;
	}
	.intro .box {
		order: 1;
		gap: 0 5.65%;
		padding: min(2vw,15px) 0 min(2vw,15px) 3.9%;
		border: min(0.6667vw, 5px) solid var(--blue);
	}
	.intro .box .square {
		font-size: min(4vw, 30px);
		line-height: 1.334;
		width: min(15.3333vw, 115px);
		height: min(14.6667vw,110px);
	}
	.intro .box .text_wrap .text {
		font-size: min(4vw, 30px);
		letter-spacing: 0.05em;
	}
	.intro .box .text_wrap .text .strong {
		font-size: min(4vw, 30px);
		letter-spacing: 0.2em;
		padding: 0 min(6.6667vw, 50px);
		margin: 0 0 min(1vw,7px);
	}
	.intro .box .text_wrap .text .strong .small {
		font-size: min(3.4667vw, 26px);
	}
	.intro .box .text_wrap .text .num {
		font-size: min(6.6667vw, 50px);
	}
	.intro .box .text_wrap .text .small {
		font-size: min(3.2vw,24px);
	}
	.intro .btn_wrap {
		order: 3;
	}
}
@media ( min-width: 601px ) and ( max-width: 960px ){
	.intro .point_list li:nth-child(2) .icon {
		top: 5px;
	}
	.intro .point_list li .text span {
		margin-top: 10px;
	}
	.intro .box {
		margin: 0 0 30px;
	}
	.intro .btn_wrap {
		width: 450px;
	}
}
@media ( max-width: 600px ){
	.intro {
		padding: 0 0 8.5333vw;
	}
	.intro .sec_head {
        background: url(img/bg_dotted.jpg) repeat top / 1.3333vw;
    }
    .intro .sec_head .ttl {
        margin: 0 0 8vw;
    }
    .intro .head_box {
		margin: 0 0 7vw;
	}
	.intro .head_box.ver2 {
		margin: 0;
	}
	.intro .box {
		margin: 0 0 4vw;
	}
	.intro .title {
		font-size: 3.2vw;
		line-height: 2;
		margin-bottom: 9.33vw;
	}
	.intro .point_list {
		gap: 0 4%;
		margin: 0 0 4.1333vw;
	}
	.intro .point_list li {
		border: 1vw solid #b8dbf2;
		flex: 0 0 48%;
		display: flex;
		align-items: center;
        justify-content: space-around;
        box-sizing: border-box;
        padding: 2vw 0;
	}
	.intro .point_list li:nth-child(1) .icon {
		width: 13.86vw;
	}
	.intro .point_list li:nth-child(2) .icon {
		width: 14.93vw;
	}
	.intro .point_list li .text {
		font-size: 3.4667vw;
	}
	.intro .point_list li .text span {
		font-size: 5.3333vw;
		margin-top: 2vw;
	}
	.intro .box_wrap {
        padding: 3.0667vw 0 0;
        margin-top: -3.0667vw;
    }
	.intro .box_wrap .subtext {
        top: 0;
        width: 20vw;
        font-size: 3.4667vw;
        padding: 1vw 0 1.2vw;
    }
    .intro .box_wrap .subtext::after {
    	bottom: -1.3333vw;
        width: 1.8667vw;
        height: 1.3333vw;
    }
}

/* =movie_wrap
-------------------------------------------------------------- */
.movie_wrap .movie {
	max-width: 810px;
	margin: 0 auto;
}
.movie_wrap .movie .in {
	position: relative;
	aspect-ratio: 16 / 9;
}
.movie_wrap .movie .in .thumb,
.movie_wrap .movie .in iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.movie_wrap .movie .in .thumb {
	z-index: 2;
	cursor: pointer;
}
.movie_wrap .movie .in iframe {
	z-index: 1;
}
.movie_wrap .text {
	position: relative;
}
.movie_wrap .text span {
	display: block;
}
@media ( min-width: 961px ){
	.movie_wrap {
		padding: 50px 0 70px;
	}
	.movie_wrap .text {
		font-size: 48px;
		padding: 0 0 42px;
		margin: 0 0 40px;
	}
	.movie_wrap .text span {
		font-size: 40px;
		margin: 0 0 20px;
	}
}
@media ( max-width: 960px ){
	.movie_wrap {
		padding:  min(6.6667vw, 50px) min(30px, 4vw) min(9.3333vw, 70px);
	}
	.movie_wrap .text {
		font-size: min(6.4vw, 48px);
		padding: 0 0 min(5.6vw, 42px);
		margin: 0 0 40px;
	}
	.movie_wrap .text span {
		font-size: min(5.3333vw, 40px);
		margin: 0 0 min(2.6667vw, 20px);
	}
}

/* =recommend .sec_head
-------------------------------------------------------------- */
.recommend .sec_head .ttl {
	position: relative;
	letter-spacing: 0.05em;
}
.recommend .sec_head .ttl::after,
.movie_wrap .text::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	background: var(--blue);
}
.recommend .sec_head .ttl span {
	display: block;
}
.recommend .sec_head .ttl .border {
	position: relative;
	display: inline-block;
	z-index: 1;
}
.recommend .sec_head .ttl .border::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	background: var(--yellow);
	z-index: -1;
}
.recommend .sec_head .recommend_list {
	position: relative;
}
.recommend .sec_head .recommend_list ul {
	display: flex;
	justify-content: space-between;
}
.recommend .sec_head .recommend_list ul li .caption {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-weight: 900;
	min-width: 72%;
	margin: 0 auto;
	box-sizing: border-box;
	background: var(--blue);
}
@media ( min-width: 601px ){
	.recommend .sec_head .ttl {
		margin: 0 0 40px;
	}
	.recommend .sec_head {
		background: url(img/bg_dotted.jpg)repeat top/ auto;
	}
	.recommend .sec_head .recommend_list {
		padding: 60px 0 50px;
		background: url(img/bg_semicircle.png)no-repeat center top/cover;
	}
	.recommend .sec_head .recommend_list ul {
		max-width: 750px;
	}
}
@media ( min-width: 961px ){
	.recommend .sec_head {
		padding: 86px 0 0;
	}
	.recommend .sec_head .ttl {
		padding: 0 0 42px;
		margin: 0 0 40px;
	}
	.recommend .sec_head .ttl::after,
	.movie_wrap .text::after {
		width: 80px;
		height: 4px;
	}
	.recommend .sec_head .ttl .border {
		font-size: 48px;
	}
	.recommend .sec_head .ttl .border::before {
		width: 91%;
		height: 12px;
		bottom: -6px;
	}
	.recommend .sec_head .ttl .small {
		font-size: 40px;
		margin-top: 20px;
	}
	.recommend .sec_head .recommend_list ul li .caption {
		bottom: 21px;
		font-size: 20px;
		padding: 10px 5px;
		height: 40px;
	}
	.recommend.office .sec_head .recommend_list ul li:nth-child(2) .caption {
		font-size: 18px;
	}
}
@media ( max-width: 960px ){
	.recommend .sec_head {
		padding: min(11.4667vw, 86px) 0 0;
	}
	.recommend .sec_head .ttl {
		padding: 0 0 min(5.6vw, 42px);
	}
	.recommend .sec_head .ttl::after,
	.movie_wrap .text::after {
		width: min(10.6667vw, 80px);
		height: min(0.5333vw, 4px);
	}
	.recommend .sec_head .ttl .border {
		font-size: min(6.4vw, 48px);
	}
	.recommend.office .sec_head .ttl .border {
		font-size: min(5.8667vw, 44px);
		letter-spacing: -0.05em;
		margin-bottom: min(2.6667vw, 20px) ;
	}
	.recommend .sec_head .ttl .border::before {
		width: 91%;
		height: min(1.6vw, 12px);
		bottom: max(-0.8vw, -6px);
		left: 3vw;
	}
	.recommend .sec_head .ttl .small {
		font-size: min(5.3333vw, 40px);
		margin-top: min(2.6667vw, 20px);
	}
	.recommend .sec_head .recommend_list ul {
		gap: 0 1.7%;
	}
	.recommend .sec_head .recommend_list ul li .caption {
		bottom: min(2.8vw, 21px);
		font-size: min(3.4667vw, 20px);
		padding: min(0.9333vw, 11px) min(0.6667vw, 5px) min(1.2vw,12px);
		height: min(5.3333vw, 40px);
	}
	.recommend.office .sec_head .recommend_list ul li:nth-child(2) .caption {
		font-size: min(2.4vw, 18px);
	}
}
@media ( max-width: 600px ){
	.recommend .sec_head {
		background: url(img/bg_dotted.jpg)repeat top/1.3333vw;
	}
	.recommend .sec_head .ttl {
		margin: 0 0 8vw;
	}
	.recommend .sec_head .recommend_list {
		padding: 3.6vw 0 8.6667vw;
		background: url(img/bg_semicircle_sp.png)no-repeat center top/cover;
	}
}



/* =recommend .catch_area
-------------------------------------------------------------- */
.recommend .catch_area {
	position: relative;
}
.recommend .catch_area .catch {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	transform: translateY(-50%);
}
.recommend .catch_area .catch .blue {
	display: inline-block;
	color: #fff;
	font-weight: 900;
	background: var(--blue);
}
.recommend .catch_area .title {
	font-weight: bold;
}
.recommend .catch_area .title.border {
    position: relative;
    display: inline-block;
    z-index: 1;
}
.recommend .catch_area .title.border::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: var(--yellow);
    z-index: -1;
}
@media ( min-width: 601px ){
	.recommend .catch_area {
		height: 333px;
	}
	.recommend .catch_area {
		background: url(img/bg_3500.jpg)no-repeat center/cover;
	}
	.recommend .catch_area .note {
		font-size: 20px;
		margin-bottom: 30px;
	}
}
@media ( min-width: 961px ){
	.recommend .catch_area .catch .blue {
		font-size: 24px;
		letter-spacing: 0.05em;
		padding: 6px 11px 7px;
	}
	.recommend .catch_area .catch br + span {
		margin-top: 16px;
	}
	.recommend .catch_area .title {
		font-size: 40px;
		margin-bottom: 15px;
	}
	.recommend .catch_area .title .num {
		font-size: 90px;
	}
	.recommend .catch_area .title .big {
		font-size: 55px;
	}
	.recommend .catch_area .title::before {
        width: 91%;
        height: 20px;
        bottom: 0;
    }
}
@media ( max-width: 960px ){
	.recommend .catch_area .catch .blue {
		font-size: min(3.2vw, 24px);
		line-height: 1.4;
		letter-spacing: 0.05em;
		padding: min(0.8vw, 6px) min(1.4667vw, 11px) min(0.9333vw, 7px);
	}
	.recommend .catch_area .catch br + span {
		margin-top: min(2.1333vw, 16px);
	}
	.intro .border::before {
        width: 91%;
        height: min(1.6vw, 12px);
        bottom: max(-0.8vw, -6px);
    }
    .recommend .catch_area .title {
		font-size: min(4.9vw, 37px);
		margin: 0 auto  2.4vw;
	}
	.recommend .catch_area .title .num {
		font-size: min(12vw, 90px);
	}
	.recommend .catch_area .title .big {
		font-size: min(6.66vw, 50px);
	}
    .recommend .catch_area .title::before {
        width: 91%;
        height: min(2.666vw, 20px);
        bottom: 0;
    }
}
@media ( max-width: 600px ){
	.recommend .catch_area {
		height: 44.4vw;
	}
	.recommend .catch_area {
		background: url(img/bg_3500_sp.jpg)no-repeat center/cover;
	}
	.recommend .catch_area .note {
		font-size: 2.4vw;
		margin-bottom: 4vw;
	}
}

/* =recommend .problem
-------------------------------------------------------------- */
.recommend .problem {
	position: relative;
	background: var(--blue);
}
.recommend .problem::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	clip-path: polygon(100% 0, 100% 1px, 48% 100%, 0 1px, 0 0);
	background: inherit;
}
.recommend .problem .area_ttl {
	position: relative;
	color: #fff;
}
.recommend .problem .area_ttl::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	background: #fff;
}
.recommend .problem .area_ttl .small {
	display: block;
}
.recommend .problem .area_ttl .color {
	color: var(--yellow);
}
.recommend .problem .problem_list {
	display: flex;
}
.recommend .problem .problem_list li {
	text-align: left;
	line-height: 1.6;
	letter-spacing: 0.025em;
	background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}
.recommend .problem .problem_list .problem_list_item.active .no_active_img {
	display: none;
}
.recommend .problem .problem_list .problem_list_item.active .active_img {
	display: block;
}
.recommend .problem .problem_list .problem_list_item .active_img {
	display: none;
}
.recommend .problem .problem_list .problem_list_item:hover .active_img {
	display: block;
}
.recommend .problem .problem_list .problem_list_item:hover .no_active_img {
	display: none;
}
.recommend .problem .problem_list li span {
	position: relative;
	color: var(--blue);
	z-index: 1;
}
.recommend .problem .problem_list li span::before {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	background: var(--yellow);
	z-index: -1;
}
.recommend .problem .solution {
	background: #fff;
}
.recommend .problem .solution ul .solution_item {
	display: none;
}
.recommend .problem .solution ul .solution_item.active {
	display: flex;
	align-items: center;
}
.recommend .problem .solution ul .solution_item .text .big {
	color: var(--blue);
	font-weight: bold;
}
.recommend .problem .solution ul .solution_item .text .border{
	position: relative;
	z-index: 1;
}
.recommend .problem .solution ul .solution_item .text .border::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: var(--yellow);
    z-index: -1;
}
@media ( min-width: 961px ){
	.recommend .problem {
		padding: 80px 0 0;
	}
	.recommend .problem::after {
		bottom: -122px;
		height: 123px;
	}
	.recommend .problem .area_ttl {
		font-size: 48px;
		padding: 0 0 43px;
		margin: 0 0 85px;
	}
	.recommend .problem .area_ttl::after {
		width: 80px;
		height: 4px;
	}
	.recommend .problem .area_ttl .small {
		font-size: 40px;
		margin: 0 0 28px;
	}
	.recommend .problem .problem_list {
		margin-bottom: 26px;
		gap: 0 2%;
	}
	.recommend .problem .problem_list li {
		font-size: 26px;
		width: 19%;
		cursor: pointer;
	}
	.recommend .problem .problem_list li::before {
		top: 0.4em;
		width: 40px;
		height: 34px;
	}
	.recommend .problem .problem_list li span {
		font-size: 28px;
	}
	.recommend .problem .problem_list li span::before {
		bottom: 0;
		height: 10px;
	}
	.recommend .problem .solution {
		max-width: 900px;
		margin: 0 auto 10px;
		padding: 40px;
		box-sizing: border-box;
	}
	.recommend .problem .solution ul .solution_item {
		gap: 4%;
	}
	.recommend .problem .solution ul .solution_item .img {
		width: 42%;
	}
	.recommend .problem .solution ul .solution_item .text {
		width: 56%;
		text-align: center;
		font-size: 22px;
		line-height: 1.8;
	}
	.recommend .problem .solution ul .solution_item .text .big {
		font-size: 26px;
	}
	.recommend .problem .solution ul .solution_item .text .border::before {
        width: 96%;
        height: 8px;
        bottom: 0;
    }
    .recommend .problem .icon_img {
    	text-align: right;
    }
}
@media ( max-width: 960px ){
	.recommend .problem {
		padding: min(12vw, 90px) 0 5vw;
	}
	.recommend .problem::after {
		bottom: max(-10.5333vw, -79px);
		height: min(10.6667vw,80px);
	}
	.recommend .problem .area_ttl {
		font-size: min(6.4vw, 48px);
		padding: 0 0 min(6.9333vw,43px);
		margin: 0 0 min(8.8vw, 66px);
	}
	.recommend .problem .area_ttl::after {
		width: min(10.6667vw, 80px);
		height: min(0.5333vw, 4px);
	}
	.recommend .problem .area_ttl .small {
		font-size: min(5.3333vw, 40px);
		margin: 0 0 min(3.7333vw, 28px);
		line-height: 1.4;
	}
	.recommend .problem .problem_list {
		padding: 0 0 min(9.6vw, 72px);
		flex-wrap: wrap;
		gap: 0 2%;
	}
	.recommend .problem .problem_list li {
		width: 32%;
	}
	.recommend .problem .problem_list li.under3 {
		margin-bottom: 43vw;
	}
	.recommend .problem .problem_list li::before {
		top: 0.4em;
		width: min(5.3333vw, 40px);
		height: min(4.5333vw, 34px);
	}
	.recommend .problem .problem_list li span {
		font-size: min(3.7333vw, 28px);
	}
	.recommend .problem .problem_list li span::before {
		bottom: 0;
		height: min(1.3333vw,10px);
	}
	.recommend .problem .solution {
		margin-top: -80vw;
		margin-bottom: 7.33vw;
	}
	.recommend .problem .solution ul .solution_item {
		gap: 1%;
	}
	.recommend .problem .solution ul .solution_item .img {
		width: 36%;
	}
	.recommend .problem .solution ul .solution_item .text {
		width: 62%;
		text-align: center;
		font-size: 3vw;
		line-height: 1.8;
	}
	.recommend .problem .solution ul .solution_item .text .big {
		font-size: 3.6vw;
	}
	.recommend .problem .solution ul .solution_item .text .border::before {
        width: 96%;
        height: min(1.6vw, 12px);
        bottom: max(-0.8vw, -6px);
    }
    .recommend .problem .icon_img {
    	text-align: right;
    	margin-bottom: 9.6vw;
    }
    .recommend .problem .icon_img img {
    	width: 28.93%;
    }
}


/* =recommend .tenalead
-------------------------------------------------------------- */
.recommend .tenalead {
	position: relative;
	z-index: -2;
}
.recommend .tenalead .area_ttl .small:first-child {
	display: block;
}
.recommend .tenalead .area_ttl .border {
	position: relative;
	display: inline-block;
}
.recommend .tenalead .area_ttl .border::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	background: var(--yellow);
	z-index: -1;
}
@media ( min-width: 601px ){
	.recommend .tenalead {
		background: url(img/fv_dotted.jpg) repeat top / auto;
	}
	.recommend .tenalead {
		padding: 217px 0 45px;
	}
}
@media ( min-width: 961px ){
	.recommend .tenalead .area_ttl {
		font-size: 40px;
		margin: 0 0 64px;
	}
	.recommend .tenalead .area_ttl .small {
		font-size: 35px;
	}
	.recommend .tenalead .area_ttl .small:first-child {
		margin: 0 0 21px;
	}
	.recommend .tenalead .area_ttl strong {
		font-size: 65px;
	}
	.recommend .tenalead .area_ttl .border::before {
		bottom: -10px;
		height: 20px;
	}
}
@media ( max-width: 960px ){
	.recommend .tenalead .area_ttl {
		font-size: min(5.3333vw, 40px);
		margin: 0 0 min(9.0667vw, 68px);
	}
	.recommend .tenalead .area_ttl .small {
		font-size: min(4.6667vw, 35px);
	}
	.recommend .tenalead .area_ttl .small:first-child {
		margin: 0 0 min(2.8vw, 21px);
	}
	.recommend .tenalead .area_ttl strong {
		font-size: min(8.6667vw, 65px);
	}
	.recommend .tenalead .area_ttl .border::before {
		bottom: max(-1.3333vw, -10px);
		height: min(2.6667vw, 20px);
	}
}
@media ( max-width: 600px ){
	.recommend .tenalead {
		background: url(img/fv_dotted.jpg) repeat top / 1.3333vw;
	}
	.recommend .tenalead {
		padding: 21.8667vw 0 8.5333vw;
	}
}
/* =recommend .offer
-------------------------------------------------------------- */
.recommend .offer .area_ttl {
	position: relative;
}
.recommend .offer .area_ttl::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	background: var(--blue);
}
.recommend .offer .area_ttl span {
	position: relative;
	display: inline-block;
	z-index: 1;
}
.recommend .offer .area_ttl span::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	background: var(--yellow);
	z-index: -1;
}
.recommend .offer .contents_img {
	background: #fff;
}
@media ( min-width: 601px ){
	.recommend .offer {
		padding: 81px 0 75px;
		background: url(img/bg_dotted.jpg)repeat top/ auto;w
	}
}
@media ( min-width: 961px ){
	.recommend .offer .area_ttl {
		font-size: 40px;
		padding: 0 0 50px;
		margin: 0 0 56px;
	}
	.recommend .offer .area_ttl::after {
		width: 80px;
		height: 4px;
	}
	.recommend .offer .area_ttl span {
		margin-top: 28px;
	}
	.recommend .offer .area_ttl span::before {
		bottom: -7px;
		width: calc(100% - 1em);
		height: 12px;
	}
	.recommend .offer .contents_img {
		padding: 65px 10% 87px;
	}
}
@media ( max-width: 960px ){
	.recommend .offer .area_ttl {
		font-size: min(5.3333vw, 40px);
		padding: 0 0 min(6.6667vw, 50px);
		margin: 0 0 min(7.4667vw, 56px);
	}
	.recommend .offer .area_ttl::after {
		width: min(10.6667vw, 80px);
		height: min(0.5333vw, 4px);
	}
	.recommend .offer .area_ttl span {
		margin-top: 3.7333vw;
	}
	.recommend .offer .area_ttl span::before {
		bottom: max(-0.9333vw, -7px);
		width: calc(100% - 1em);
		height: min(1.6vw, 12px);
	}
}
@media ( max-width: 600px ){
	.recommend .offer {
		padding: 11.6vw 0 10vw;
		background: url(img/bg_dotted.jpg)repeat top/ 1.3333vw;
	}
}
/* =reason 
-------------------------------------------------------------- */
.reason .inner {
	padding: 0;
}
.reason .sec_ttl {
	position: relative;
}
.reason .sec_ttl::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	background: var(--blue);
}
.reason .sec_ttl .border {
	position: relative;
	display: inline-block;
	z-index: 1;
}
.reason .sec_ttl .border::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	background: var(--yellow);
	z-index: -1;
}
.reason .reason_list dl {
	position: relative;
	color: #fff;
	text-align: left;
	background: var(--blue);
	box-sizing: border-box;
}
.reason .reason_list dl:nth-child(even) {
	margin-left: auto;
}
.reason .reason_list dl::before,
.reason .reason_list dl::after {
	content: '';
	position: absolute;
}
.reason .reason_list dl:nth-child(odd)::before {
	left: 0;
}
.reason .reason_list dl:nth-child(even)::before {
	right: 0;
}
.reason .reason_list dl:nth-child(1)::before {
	background: url(img/reason_point1.png)no-repeat top/100% auto;
}
.reason .reason_list dl:nth-child(2)::before {
	background: url(img/reason_point2.png)no-repeat top/100% auto;
}
.reason .reason_list dl:nth-child(3)::before {
	background: url(img/reason_point3.png)no-repeat top/100% auto;
}
.reason .reason_list dl:nth-child(1)::after {
	background: url(img/icon_reason_point1.png)no-repeat center/contain;
}
.reason .reason_list dl:nth-child(2)::after {
	background: url(img/icon_reason_point2.png)no-repeat center/contain;
}
.reason .reason_list dl:nth-child(3)::after {
	background: url(img/icon_reason_point3.png)no-repeat center/contain;
}
.reason .reason_list dl dt {
	font-weight: 500;
	border-bottom: 1px solid #fff;
}
.reason .reason_list dl dt .color {
	color: var(--yellow);
	font-weight: bold;
}
.reason .reason_list dl dt .dot {
	position: relative;
}
.reason .reason_list dl dt .dot::before {
	content: '・';
	position: absolute;
	top: -0.6em;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.reason .reason_list dl.point_3 dt .color .dot::before {
	text-indent: -0.1em;
}
.reason .reason_list dl dd {
	font-weight: 500;
}
@media ( min-width: 601px ){
	.reason {
		padding: 80px 0 82px;
	}
	.reason .reason_list {
		margin: 0 0 100px;
	}
	.reason .reason_list dl {
		max-width: 780px;
	}
	.reason .reason_list dl + dl {
		margin-top: 80px;
	}
}
@media ( min-width: 961px ){
	.reason .sec_ttl {
		font-size: 40px;
		padding: 0 0 50px;
		margin: 0 0 59px;
	}
	.reason .sec_ttl::before {
		width: 80px;
		height: 4px;
	}
	.reason .sec_ttl .border {
		font-size: 50px;
		margin-top: 18px;
	}
	.reason .sec_ttl .border::before {
		bottom: 0;
		height: 12px;
	}
	.reason .sec_ttl .border .num {
		font-size: 65px;
	}
	.reason .reason_list dl:nth-child(odd) {
		padding: 60px 70px 60px 80px;
		border-radius: 0 0 70px 0;
	}
	.reason .reason_list dl:nth-child(even) {
		padding: 60px 80px 60px 70px;
		border-radius: 70px 0 0 0;
	}
	.reason .reason_list dl::before {
		top: 36px;
		width: 43px;
		height: 235px;
	}
	.reason .reason_list dl:nth-child(1)::after {
		right: -110px;
		bottom: -27px;
		width: 156px;
		height: 151px;
	}
	.reason .reason_list dl:nth-child(2)::after {
		left: -134px;
		bottom: -45px;
		width: 160px;
		height: 187px;
	}
	.reason .reason_list dl:nth-child(3)::after {
		right: -72px;
		bottom: -31px;
		width: 84px;
		height: 170px;
	}
	.reason .reason_list dl dt {
		font-size: 35px;
		padding: 0 0 29px;
	}
	.reason .reason_list dl dt .color {
		font-size: 48px;
	}
	.reason .reason_list dl.point_3 dt .color {
		font-size: 36px;
	}
	.reason .reason_list dl.point_3 dt .color .num {
		font-size: 70px;
	}
	.reason .reason_list dl dt .color .dot::before {
		font-size: 48px;
	}
	.reason .reason_list dl dd {
		padding: 35px 0 0;
	}
	.reason .reason_list dl dd p {
		font-size: 24px;
		line-height: 1.667;
	}
	.reason .reason_list dl dd .notes {
		font-size: 18px;
		letter-spacing: -0.05em;
		margin-top: 27px;
	}
	.reason .reason_list dl dd .notes li + li {
		margin-top: 17px;
	}
}
@media ( max-width: 960px ){
	.reason .sec_ttl {
		font-size: min(5.3333vw, 40px);
		padding: 0 0 min(6.6667vw, 50px);
		margin: 0 0 min(9.2vw, 69px);
	}
	.reason .sec_ttl::before {
		width: min(10.6667vw, 80px);
		height: min(0.5333vw, 4px);
	}
	.reason .sec_ttl .border {
		font-size: min(6.6667vw, 50px);
		margin-top: min(2.1333vw, 16px);
	}
	.reason .sec_ttl .border::before {
		bottom: 0;
		height: min(1.6vw, 12px);
	}
	.reason .sec_ttl .border .num {
		font-size: min(8.6667vw,65px);
	}
	.reason .reason_list dl {
		width: 82.666%;
	}
	.reason .reason_list dl::before {
		top: min(4.5333vw, 34px);
		width: min(4.4vw, 33px);
		height: min(25.0667vw, 188px);
	}
	.reason .reason_list dl:nth-child(1)::after {
		right: max(-14.8vw, -111px);
		bottom: max(-4.6667vw, -35px);
		width: min(20.8vw,156px);
		height: min(20.1333vw, 151px);
	}
	.reason .reason_list dl:nth-child(2)::after {
		left: max(-15.2vw, -114px);
		bottom: max(-5.2vw, -39px);
		width: min(17.4667vw, 131px);
		height: min(20.5333vw, 154px);
	}
	.reason .reason_list dl:nth-child(3)::after {
		right: max(-9.6vw,-72px);
		bottom: max(-4.8vw, -36px);
		width: min(11.2vw, 84px);
		height: min(22.6667vw, 170px);
	}
	.reason .reason_list dl:nth-child(odd) {
		padding: min(6vw, 45px) min(5.3333vw, 40px) min(6.4vw, 48px) min(8vw, 60px);
		border-radius: 0 0 min(9.3333vw, 70px) 0;
	}
	.reason .reason_list dl:nth-child(even) {
		padding: min(6vw, 45px) min(8vw, 60px) min(6.4vw, 48px) min(5.3333vw, 40px);
		border-radius: min(9.3333vw, 70px) 0 0 0;
	}
	.reason .reason_list dl dt {
		font-size: min(4.6667vw, 45px);
		line-height: 1.25;
		letter-spacing: 0.05em;
		padding: 0 0 min(3.2vw, 24px);
	}
	.reason .reason_list dl dt .color {
		font-size: min(6.4vw, 48px);
	}
	.reason .reason_list dl.point_3 dt .color {
		font-size: min(4.8vw, 36px);
	}
	.reason .reason_list dl.point_3 dt .color .num {
		font-size: min(9.3333vw, 70px);
	}
	.reason .reason_list dl dt .color .dot::before {
		font-size: min(6.4vw, 48px);
		top: -0.75em;
	}
	.reason .reason_list dl dd {
		padding: min(4.4vw, 33px) 0 0;
	}
	.reason .reason_list dl dd p {
		font-size: min(3.2vw, 24px);
		line-height: 1.667;
	}
	.reason .reason_list dl dd .notes {
		font-size: min(2.4vw, 18px);
		line-height: 1.94;
		margin-top: min(2.6667vw, 20px);
	}
	.reason .reason_list dl dd .notes li {
		padding-left: 1em;
		text-indent: -1em;
	}
}
@media ( max-width: 600px ){
	.reason {
		padding: 13.6vw 0 13.4667vw;
	}
	.reason .reason_list {
		margin: 0 0 11.2vw;
	}
	.reason .reason_list dl + dl {
		margin-top: 12.2667vw;
	}
}

/* =step 
-------------------------------------------------------------- */
.step {
	overflow: hidden;
	background: var(--blue);
}
.step .sec_ttl {
	position: relative;
	color: #fff;
}
.step .sec_ttl::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	background: #fff;
}
.step ul li {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #fff;
}
.step ul li:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	background: url(img/step_arrow.png)no-repeat center/contain;
}
.step ul li .step_num,
.step ul li .step_icon {
	position: absolute;
}
.step ul .step_04 p {
	color: var(--blue);
	text-decoration: underline;
	text-decoration-color: var(--yellow);
	text-underline-offset: -0.1em;
}
@media ( min-width: 601px ){
	.step {
		padding: 79px 0 158px;
	}
	.step ul {
		max-width: 800px;
		margin: 0 auto;
	}
}
@media ( min-width: 961px ){
	.step .sec_ttl {
		font-size: 40px;
		padding: 0 0 43px;
		margin: 0 0 77px;
	}
	.step .sec_ttl::after {
		width: 80px;
		height: 4px;
	}
	.step ul li {
		font-size: 30px;
		height: 150px;
		line-height: 1.33;
	}
	.step ul li::after {
		bottom: -88px;
		width: 94px;
		height: 46px;
	}
	.step ul li + li {
		margin-top: 128px;
	}
	.step ul .step_04 {
		height: 220px;
	}
	.step ul li .step_num {
		top: -53px;
		left: -42px;
	}
	.step ul .step_01 .step_icon {
		right: -26px;
		bottom: -47px;
	}
	.step ul .step_02 .step_icon {
		right: -26px;
		bottom: -49px;
	}
	.step ul .step_03 .step_icon {
		right: -27px;
		bottom: -53px;
	}
	.step ul .step_04 .step_icon {
		right: -43px;
		bottom: -43px;
	}
	.step ul .step_04 p {
		font-size: 45px;
		text-decoration-thickness: 12px;
	}
}
@media ( max-width: 960px ){
	.step .sec_ttl {
		font-size: min(5.3333vw, 40px);
		padding: 0 0 min(5.4667vw, 41px);
		margin: 0 0 min(9.0667vw, 68px);
	}
	.step .sec_ttl::after {
		width: min(10.6667vw, 80px);
		height: min(0.5333vw, 4px);
	}
	.step ul li {
		font-size: min(4vw,30px);
		line-height: 1.33;
		height: min(26.6667vw, 200px);
	}
	.step ul li::after {
		bottom: max(-11.7333vw, -88px);
		width: min(12.5333vw, 94px);
		height: min(6.1333vw, 46px);
	}
	.step ul .step_04 {
		font-size: min(6vw, 45px);
		height: min(29.3333vw, 220px);
	}
	.step ul li .step_num {
		top: max(-8.4vw, -63px);
		left: min(2.1333vw, 16px);
		width: min(16vw, 120px);
	}
	.step ul li + li {
		margin-top: min(18.4vw, 138px);
	}
	.step ul .step_01 .step_icon {
		right: max(-1.8667vw, -14px);
		bottom: max(-4.4vw, -33px);
		width: min(9.8667vw, 74px);
	}
	.step ul .step_02 .step_icon {
		right: max(-2.9333vw, -22px);
		bottom: max(-6.9333vw, -52px);
		width: min(16.2667vw, 122px);
	}
	.step ul .step_03 .step_icon {
		right: max(-2.2667vw, -17px);
		bottom: max(-5.7333vw,-43px);
		width: min(14.6667vw, 110px);
	}
	.step ul .step_04 .step_icon {
		right: max(-5.6vw, -42px);
		bottom: max(-6.8vw, -51px);
		width: min(28.4vw, 213px);
	}
	.step ul .step_04 p {
		text-decoration-thickness: min(1.6vw,12px);
	}
}
@media ( max-width: 600px ){
	.step {
		padding: 12vw 0 16vw;
	}
}

/* =qa 
-------------------------------------------------------------- */
.qa .sec_ttl {
	position: relative;
}
.qa .sec_ttl::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	background: var(--blue);
}
.qa .qa_list dl {
	text-align: left;
	background: #fff;
	cursor: pointer;
}
.qa .qa_list dl dt,
.qa .qa_list dl dd {
	position: relative;
}
.qa .qa_list dl dt {
	position: relative;
	color: var(--blue);
	font-weight: 500;
}
.qa .qa_list dl dt::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background: url(img/q.png)no-repeat center/cover;
}
.qa .qa_list dl dt::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: url(img/icon_plus.png)no-repeat center/cover;
}
.qa .qa_list dl.open dt::after {
	background: url(img/icon_minus.png)no-repeat center/cover;
}
.qa .qa_list dl.open dt + dd {
	display: block;
}
.qa .qa_list dl dd::before {
	content: '';
	position: absolute;
	left: 0;
	background: url(img/a.png)no-repeat center/cover;
}
@media ( min-width: 601px ){
	.qa {
		padding: 81px 0 85px;
		background: url(img/bg_dotted.jpg)repeat top/ auto;
	}
}
@media ( min-width: 961px ){
	.qa .sec_ttl {
		font-size: 45px;
		padding: 0 0 42px;
		margin: 0 0 81px;
	}
	.qa .sec_ttl::after {
		width: 80px;
		height: 4px;
	}
	.qa .qa_list dl {
		padding: 33px 30px 31px 30px;
		border: 3px solid var(--blue);
		border-radius: 20px;
	}
	.qa .qa_list dl + dl {
		margin-top: 20px;
	}
	.qa .qa_list dl dt {
		font-size: 24px;
		padding-left: 52px;
	}
	.qa .qa_list dl dt::before {
		width: 30px;
		height: 25px;
	}
	.qa .qa_list dl dt::after {
		right: 0;
		width: 24px;
		height: 25px;
	}
	.qa .qa_list dl dd {
		font-size: 18px;
		line-height: 1.667;
		padding-left: 52px;
		margin-top: 28px;
	}
	.qa .qa_list dl dd::before {
		top: 6px;
		width: 26px;
		height: 21px;
	}
}
@media ( max-width: 960px ){
	.qa .sec_ttl {
		font-size: min(6vw, 45px);
		padding: 0 0 min(5.4667vw, 41px);
		margin: 0 0 min(9.8667vw, 74px);
	}
	.qa .sec_ttl::after {
		width: min(10.6667vw, 80px);
		height: min(0.5333vw, 4px);
	}
	.qa .qa_list dl {
		padding: min(4.4vw, 33px) min(3.4667vw, 26px) min(4.6667vw, 35px) min(2.9333vw, 22px);
		border: min(0.5333vw, 3px) solid var(--blue);
		border-radius: min(2.6667vw, 20px);
	}
	.qa .qa_list dl + dl {
		margin-top: min(2.6667vw, 20px);
	}
	.qa .qa_list dl dt {
		font-size: min(3.7333vw, 28px);
		padding-left: min(8vw, 60px);
	}
	.qa .qa_list dl dt::before {
		width: min(5.2vw, 39px);
		height: min(4.4vw, 33px);
	}
	.qa .qa_list dl dt::after {
		right: 0;
		width: min(4.6667vw, 35px);
		height: min(4.8vw, 36px);
	}
	.qa .qa_list dl dd {
		font-size: min(3.4667vw, 26px);
		line-height: 1.538;
		letter-spacing: 0.05em;
		padding-left: min(8vw, 60px);
		margin-top: min(6.4vw, 48px);
	}
	.qa .qa_list dl dd::before {
		top: min(0.9333vw, 7px);
		width: min(4.8vw, 36px);
		height: min(3.7333vw, 28px);
	}
}
@media ( max-width: 600px ){
	.qa {
		padding: 11.8667vw 0 12vw;
		background: url(img/bg_dotted.jpg)repeat top/ 1.3333vw;
	}
}

/* =footer
-------------------------------------------------------------- */
.btns_area {
	position: relative;
}
.btns_area .pagetop a {
	display: block;
}
.btns_area .pagetop a span {
	position: relative;
	display: inline-block;
	color: #182f53;
	letter-spacing: 0.05em;
}
.footer {
	background: #182f53;
}
.footer .official a {
	position: relative;
	display: inline-block;
	color: #fff;
}
.footer .official a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	background: url(img/btn_arrow.png)no-repeat center/contain;
}
.footer .copyright {
	color: #fff;
}
.footer .foot_link a {
	color: #fff;
	text-decoration: underline;
}
.footer .foot_link a:hover {
	text-decoration: none;
}
@media ( min-width: 601px ){
	.btns_area {
		padding: 81px 0 84px;
	}
	.footer {
		padding: 53px 0 21px;
	}
	.footer .logo {
		margin: 0 0 25px;
	}
	.footer .official {
		margin: 0 0 30px;
	}
	.footer .official a {
		font-size: 14px;
		padding-right: 24px;
		letter-spacing: 0.05em;
	}
	.footer .official a::after {
		width: 15px;
		height: 15px;
	}
	.footer .foot_link {
		font-size: 12px;
		margin-bottom: 48px;
	}
}
@media ( min-width: 961px ){
	.pagetop {
		position: fixed;
		right: 40px;
		bottom: 30px;
	}
	.pagetop.absolute {
		position: absolute;
	}
	.btns_area .pagetop a {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 70px;
		height: 70px;
		border: 3px solid #182f53;
		border-radius: 10px;
		box-sizing: border-box;
		background: #fff;
	}
	.btns_area .pagetop a span {
		font-size: 21px;
		padding: 28px 0 0;
		background: url(img/pagetop.png)no-repeat top center/auto;
	}
	.footer {
		padding: 53px 0 21px;
	}
	.footer .copyright {
		font-size: 12px;
	}
}
@media ( max-width: 960px ){
	.btns_area .btn {
		margin: 0 0 min(10.8vw, 81px);
	}
	.btns_area .pagetop a span {
		font-size: min(4.4vw, 33px);
		padding: min(7.0667vw, 53px) 0 0;
		background: url(img/page_top_sp.png)no-repeat top center/min(8.5333vw, 64px) min(5.6vw, 42px);
	}
}
@media ( max-width: 600px ){
	.btns_area {
		padding: 9.3333vw 0;
	}
	.footer {
		padding: 9.3333vw 0 5.6vw;
	}
	.footer .logo {
		width: 46.6667vw;
		margin: 0 auto 4.5333vw;
	}
	.footer .official {
		margin: 0 0 6.4vw;
	}
	.footer .official a {
		font-size: 3.2vw;
		padding-right: 4.9333vw;
		letter-spacing: 0.05em;
	}
	.footer .official a::after {
		width: 2.8vw;
		height: 2.8vw;
	}
	.footer .copyright {
		font-size: 2.6667vw;
	}
	.footer .foot_link {
		font-size: 2.933vw;
		margin-bottom: 9.33vw;
	}
}