@charset "UTF-8";

/*-------------------------------------------
全体設定
-------------------------------------------*/
html {
	margin: 0;
	padding: 0;
	font-size: 15px;	/*基準となるフォントサイズ。*/
	overflow-x: hidden;
}

body {
	width:100vw;
	margin:0;
	font-family: sans-serif, "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;	/*フォント種類*/
	background:#f7f7f7;	/*背景色*/
	overflow: hidden;
	scroll-behavior: smooth;
}

@font-face{
	font-family:"myfont_1";
	src:url("../fonts/Thesignature.ttf") format("truetype");
}

@font-face{
	font-family:"myfont_2";
	src:url("../fonts/ArsenicaTrial-Italic.ttf") format("truetype");
}

@font-face{
	font-family:"myfont_3";
	src:url("../fonts/Arimo-Regular.ttf") format("truetype");
}

@font-face{
	font-family:"myfont_4";
	src:url("../fonts/Arimo-Bold.ttf") format("truetype");
}

@font-face{
	font-family:"myfont_5";
	src:url("../fonts/Arimo-Regular.ttf") format("truetype");
}

a {
	transition: 0.3s;
	text-align: center;
}

img{
	max-width:100%;
}

p{
	margin:0;
	font-size:1.2rem;
    line-height: 1.5;
    letter-spacing: 0.7px;
}

h2{
    margin:0;
	font-size:1.5rem;
    text-align: center;
    font-weight: 700;
    color: #222;

}

h3{
    font-size: 1.7rem;
}

h4{
    font-size: 1.35rem;
    line-height: 1.5;
}

section{
    padding: 15% 7.7% 0;
}

.sec-top{
	display:flex;
	justify-content: space-evenly;
}

.sec-title{
    font-size: 2.2em;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 0.5px #c7c7c7;
    text-shadow: 2px 2px 3px #ebebeb, 0px 0px 0px #777;
    text-align: center;
    box-shadow:
	 inset 7px 7px 10px 0 rgba(77, 77, 77, 0.25),
	 inset -7px -7px 10px 0 #fff;
	border-radius: 0.5em;
	width: fit-content;
	margin: 5% auto;
	padding: 3% 20%;
}

.tr{
	position: relative;
	display: inline-block;
	color: transparent;
	-webkit-text-stroke: 1px #aaa;
	font-size:40px;
	font-family:"myfont_4";
	line-height: 1em;
}

.rt{
	position: relative;
	font-size: 25px;
	color: #fff;
	background-image: linear-gradient(to right, #a5a5a5 15%, transparent);
	padding-left: 10px;
}

.item{
	display: block;
	background: linear-gradient(140deg, rgba(202,202,202,0.5), rgba(250,250,250,0.5));
    border-radius: 0.5rem;
    box-shadow:
	 3px 3px 5px 0 rgb(222,222,222),
	 -3px -3px 5px 0 rgb(255 255 255);
}

@media screen and (min-width:700px){ /*TB版*/
	p{
		font-size: 2rem;
	}

	.sec-title{
        font-size: 4em;
	}
}

@media screen and (min-width:1000px){ /*PC版*/
	h2{
		font-size: 4rem;
	}

    h3 {
        font-size: 2rem;
    }

    h4{
        font-size: 1.5rem;
    }
	
	p{
		font-size: 1.05rem;
        line-height: 1.7;
	}
	
	.section{
		padding: 5% 0;
	}
	
	.sec-title{
        font-size: 3.5em;
        font-weight: 900;
        color: transparent;
        -webkit-text-stroke: 0.5px #c7c7c7;
        text-shadow: 3px 3px 5px #ebebeb, 0px 0px 0px #777;
        margin: 3% auto 1%;
        padding: 1.5% 10%;
	}
	
	.tr{
		font-size:10rem;
	}
	
	.rt{
		font-size:30px;
	}

	.item{
		background: linear-gradient(140deg, rgb(242,242,242), rgb(220,220,220));
		border-radius: 3rem;
        box-shadow:
		 inset 20px 20px 15px 0 transparent,
		 inset -10px -10px 15px 0 transparent,
		 10px 10px 10px 0 #cfcfcf,
		 -7px -7px 15px 0px #fff;
		transition: .5s;
	}

	 .item:hover{
		-webkit-transform: translateY(7px);
		transform: translateY(7px);
		box-shadow:
		 inset 10px 10px 10px 0 #bbb,
		 inset -10px -10px 10px 0 #fff,
		 0px 0px 0px 0 transparent,
		 0px 0px 0px 0 transparent;
	}
}

/*-------------------------------------------
セクション１
-------------------------------------------*/
.sec1{
    padding-top: 30%;
}

.sec1-img{
    width: 95%;
    margin: 7% auto 15%;
}

.sec1-img img{
    filter: drop-shadow(0px 0px 10px #aaa);
}

.sec1 .text{
    margin: 10% auto;
}

@media screen and (min-width:700px){ /*TB版*/
	

}

@media screen and (min-width:1000px){ /*PC版*/
	.sec1{
		padding-top: 7%;
	}

    .sec1-img{
        position: relative;
        width: 100%;
        height: 15em;
        margin-bottom: 10%;
    }

    .sec1-img img{
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        transform: scale(150%);
    }

    .sec1 .text {
        margin: 7% auto;
    }
}

/*-------------------------------------------
セクション２
-------------------------------------------*/
.wave-1-1{
    position: relative;
    top: 5px;
}

.sec2{
    background-color: #555;
    padding: 15% 7.7% 15%;
    color: #fff;
}

.sec2-top h2{
    color: #fff;
}

.sec2-top p{
    margin: 10% auto;
    line-height: 1.5;
    letter-spacing: 1px;
}

.pc-img{
    display: none;
}

.sp-img{
    display: flex;
    flex-flow: column;
    align-items: center;
    background-color: #fdfdfd;
    border-radius: 1rem;
    padding: 10% 0;
    color: #222;
}

.sec2 .sub-title{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    margin: 3% auto;
}

.sub-title .img{
    margin: 0 3%;
}

.sp-img .middle{
    display: flex;
    justify-content: center;
    align-items: center;
}

.sp-img h5{
    font-size: 0.7rem;
    text-align: center;
    text-wrap: nowrap;
}

.sp-img .center{
    display: flex;
    justify-content: center;
    align-items: center;
}

.sp-img .arrow-2{
    transform: rotate(180deg);
}

.wave-1-2{
    position: relative;
    top: -5px;
}


@media screen and (min-width:700px){ /*TB版*/
	

}

@media screen and (min-width:1000px){ /*PC版*/
    .sec2{
        padding: 10% 7% 15%;
    }

    .sp-img{
        display: none;
    }

    .pc-img{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        background-color: #fdfdfd;
        border-radius: 1rem;
        padding: 5% 0;
        color: #222;
    }
    
    .sec2 .sub-title{
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: space-between;
        width: fit-content;
        height: 20em;
        margin: 0;
    }
    
    .sub-title .img{
        width: 70%;
        margin: 0 3%;
    }

    .sec2 img{
        width: 100%;
    }
    
    .sec2 .sub-title2 .img{
        margin: 0;
        margin-bottom: 30%;
    }

    .pc-img .middle{
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        width: 30%;
    }
    
    .pc-img .text{
        font-size: 1.2rem;
        text-align: center;
        text-wrap: nowrap;
    }
    
    .pc-img .center{
        position: relative;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 5% auto;
    }

    .pc-img .top{
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
    }

    .pc-img .sns-img{
        width: 55%;
    }

    .pc-img .bottom{
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
    }

    .pc-img .arrow-2{
        transform: rotate(180deg);
    }
}

/*-------------------------------------------
セクション３
-------------------------------------------*/

.sec3{
    padding: 20% 7.7% 15%;
}

.sec3-top h2{
    margin-bottom: 15%;
    font-size: 1.5rem;
    text-wrap: nowrap;
}

.sec3-top p{
    margin-top: 7%;
    font-size: 0.9rem;
}

.sec3 .content{
    background-color: #ddd;
    border-radius: 1.5em;
    margin: 10% 0;
    padding: 15%;
}

.sec3 .sub-title{
    margin: 5% 0 15%;
    font-size: 1.6rem;
    text-shadow: 0px 3px 5px #fff;
    font-weight: 700;
    text-align: center;
    text-wrap: nowrap;
    color: #333;
}

@media screen and (min-width:700px){ /*TB版*/
	

}

@media screen and (min-width:1000px){ /*PC版*/
    .sec3 {
        padding: 10% 7.7%;
    }

    .sec3-top h2 {
        margin-bottom: 10%;
        font-size: 4rem;
    }

    .sec3-top p {
        margin-top: 7%;
        font-size: 1.2rem;
        line-height: 1.5;
    }

    .sec3 .container{
        display: flex;
        align-items: flex-start;
        justify-content: space-evenly;
        margin-top: 10%;
    }
    
    .sec3 .content{
        width: calc(100% / 3 - 3%);
        height: 300px;
        margin: 0;
        padding: 3% 5%;
    }

    .sec3 .content p {
        font-size: 1.1rem;
    }

}