@charset "utf-8";

/*********************************root*********************************/

:root {
--main-color :rgba(108,159,86,1); /*#ef4123 #b42d51*/
--second-color: #d6ae3c;
--third-color: #000;
--size-xxlarge: clamp(6px,8vw,32px);
--size-xlarge: clamp(6px,6vw,28px);
--size-large: clamp(6px,4vw,24px);
--size-medium: clamp(6px,2.7vw,21px);
--size-small: clamp(6px,2.3vw,18px); 
--size-xsmall: clamp(6px,2vw,12px); 
--weight-bold: 900;
--weight-medium: 600;
--weight-regular: 500;
--bottom-gap: 20px;
--side-gap: 0px 10%;
--page-width: 1200px;
}

/*********************************
カラー設定
*********************************/

.main-color {color: var(--main-color);}
.second-color {color: var(--second-color);}
.third-color {color: var(--third-color);}
.fourth-color {color: var(--fourth-color);}

.white {color: #fff;}
.black {color: #000;}

/*********************************
フォントサイズ
*********************************/

.font-xxl {font-size: var(--size-xxlarge);}
.font-xl {font-size: var(--size-xlarge);}
.font-l {font-size: var(--size-large);}
.font-m {font-size: var(--size-medium);}
.font-s {font-size: var(--size-small);}
.font-xs {font-size: var(--size-xsmall);}

/*********************************
テキストのベース設定
*********************************/

html {
	font-family: 'Noto Sans', sans-serif;
	color: #000;
	font-size: 62.5%;
}

p {font-size: 1.2em;}

@media screen and (min-width: 768px) {
    p {font-size: 2.2em;}
}


/*********************************
ページ幅設定
*********************************/

main {
/*	padding-top: 12.5rem;*/ /*header調整*/
}
.container {
	padding-bottom: var(--bottom-gap);
    background-color: #fff;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}
.container-bottom {
	padding-bottom: 50px;
}
.content {
	margin: var(--side-gap);
    padding-top: 20%;
    position: relative;
}

/*********************************
PC表示
*********************************/

@media screen and (min-width: 768px) {
	body {
		max-width: var(--page-width);
        background-color: #f5f5dc;
	}
	.header {
		max-width: var(--page-width);
		max-height: 195px;	
	}
	main {
/*		padding-top: 140px;*/ /*140~180px*/
	}
}

.pop_up{
    display:none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(227, 246, 245, 0.6);
    z-index: 2;
}

/*********************************
背景
*********************************/

.bg1 {
/*	max-height: 1139px;*/
	background:		
		url("../img/common/deco-wave.webp") bottom no-repeat,
		url("../img/common/bg_1.webp") no-repeat;
    background-color: rgba(0,207,193,1);
	background-size: 100%;
}

.bg_mock {
	background-color: #000;
}

.bg2 {
/*    background: linear-gradient(185deg, transparent 55%, transparent 55%, transparent 55%, transparent 55%, #00cfc1 55.9%, #00cfc1 100%, #000 100%, #000 100%);*/
background: linear-gradient(185deg, transparent 20%, #00cfc1 21%, #00cfc1 50%, #ff66ff 50.0%);
    /*	background:		
		url("../img/common/bg_2.webp") no-repeat;
	background-size: 100%;
    padding-bottom: 5%;*/
}

.bg3 {
/*	max-height: 1139px;*/
	background:		
		url("../img/common/deco-dots_1.webp");
	background-size: 100%;
	background-repeat: no-repeat;
}

.bg4 {
	background: var(--main-color);
	border-radius: 50% 50% 0 0 / 10% 10% 70% 70%;
}
.bg4-2 {
    background: var(--main-color);
    border-radius: 50% 50% 0 0 / 3% 3% 70% 70%;
}
.bg5 {
	background: rgba(0,207,193,1);
	background-image: url("../img/common/deco-wave.webp");
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100%;
}

.bg-img-1 {
    background-image: url("../img/common/bg-short.webp");
    background-size: 100%;
    background-repeat: no-repeat;


}
.bg-img-2 {
    background-image: url("../img/common/bg-middle.webp");
    background-size: 100%;
    background-repeat: no-repeat;
}

@media screen and (min-width:768px) {
	
}

/*********************************
デコレーション
*********************************/

.deco-bubble-l {
    position: absolute;
    top: -10%;
    left: -12%;
    width: 30%;
}

.deco-bubble-r {
    position: absolute;
    top: -10%;
    right: -7%;
    width: 25%;
}

/*********************************dots*********************************/

.deco-dots {position: relative;}

.l-1 {position: absolute; top: 10%; left: 0; width: 9%;}
.l-2 {position: absolute; top: 55%; left: 0; width: 9%;}
.l-3 {position: absolute; bottom: 2%; left: 0; width: 9%;}
.r-1 {position: absolute; top: 25%; right: 0; width: 10%;}
.r-2 {position: absolute; top: 80%; right: 0; width: 10%;}


/*********************************
mock
*********************************/
.mock-img {
	margin: 0 35%;
}
.mock-img img {
	width: 100%;
}

.parent {
display: grid;
grid-template-columns: 1.5fr 1fr;
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 2 / 2;
margin-bottom: 8%;
}

.div2 { grid-area: 2 / 1 / 3 / 2; }
.div3 { grid-area: 1 / 2 / 3 / 3; }