@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700;900&display=swap');

.pcOnly {display: block;}
.spOnly {display: none;}

html {
	font-size: 62.5%;
}
body {
    width: 100%;
	font-size: 1.6rem;
	font-family: sans-serif;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: normal;
	line-height: 175%;
    color: rgb(60,60,60);
    background-color: rgb(255,255,255);
    text-align: justify;
    -webkit-text-size-adjust: 100%;
}
#container {
    width: 100%;
    margin: 0 auto;
}
img {
    width: 100%;
    vertical-align: bottom;
    border: none;
}

.max {width: 100%;margin: 0 auto;}
.max_800 {width: 100%;max-width: 800px;margin: 0 auto;}
.max_1000 {
    width: 100%;max-width: 1000px;margin: 0 auto;}
.max_1200 {width: 100%;max-width: 1200px;margin: 0 auto;}

.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.just {text-align: justify;}
.block {display: block;}
.inline{display: inline-block;}

.fs08{font-size: 0.8rem;}
.fs10{font-size: 1rem;}
.fs16{font-size: 1.6rem;}
.fs18{font-size: 1.8rem;}
.fs20{font-size: 2rem;}
.fs25{font-size: 2.5rem;}
.fs30{font-size: 3rem;}
.fs35{font-size: 3.5rem;}
.fs40{font-size: 4rem;}
.fs45{font-size: 4.5rem;}
.fs50{font-size: 5rem;}
.fs60{font-size: 6rem;}
.fs80{font-size: 8rem;}
.fs100{font-size: 10rem;}

.lh120{line-height: 120%;}
.lh150{line-height: 150%;}

.bold {font-weight: bold;}
.normal {font-weight: 300;}
.jikan05 {letter-spacing: 0.5rem;}
.jikan07 {letter-spacing: 0.7rem;}
.jikan10 {letter-spacing: 1rem;}

.w10{width: 10%;}
.w20{width: 20%;}
.w25{width: 25%;}
.w30{width: 30%;}
.w40{width: 40%;}
.w50{width: 50%;}
.w60{width: 60%;}
.w70{width: 70%;}
.w80{width: 80%;}
.w90{width: 90%;}
.w95{width: 95%;}
.w100{width: 100%;}
.w25_100{width: 25%;}
.w30_100{width: 30%;}
.w40_100{width: 40%;}
.w50_100{width: 50%;}
.w70_100{width: 70%;}
.w80_100{width: 80%;}
.box {box-sizing: border-box;}

.mauto {margin-left: auto;margin-right: auto;}
.mt05{margin-top: 0.5rem;}
.mt10{margin-top: 1rem;}
.mt15{margin-top: 1.5rem;}
.mt20{margin-top: 2rem;}
.mt30{margin-top: 3rem;}
.mt40{margin-top: 4rem;}
.mt60{margin-top: 6rem;}
.mt80{margin-top: 8rem;}
.mt100{margin-top: 10rem;}
.mt150{margin-top: 15rem;}
.mr05{margin-right: 0.5rem;}
.mr10{margin-right: 1rem;}
.mr20{margin-right: 2rem;}
.ml05{margin-left: 0.5rem;}
.ml10{margin-left: 1rem;}
.ml20{margin-left: 2rem;}

.pd05{padding: 0.5rem;}
.pd10{padding: 1rem;}
.pd20{padding: 2rem;}
.pd30{padding: 3rem;}
.pd50{padding: 5rem;}
.pt05{padding-top: 0.5rem;}
.pt10{padding-top: 1rem;}
.pt20{padding-top: 2rem;}
.pt30{padding-top: 3rem;}
.pt50{padding-top: 5rem;}
.pt80{padding-top: 8rem;}
.pt100{padding-top: 10rem;}
.pb05{padding-bottom: 0.5rem;}
.pb10{padding-bottom: 1rem;}
.pb20{padding-bottom: 2rem;}
.pb30{padding-bottom: 3rem;}
.pb50{padding-bottom: 5rem;}
.pb80{padding-bottom: 8rem;}
.pb100{padding-bottom: 10rem;}
.pl05{padding-left: 0.5rem;}
.pl10{padding-left: 1rem;}
.pl15{padding-left: 1.5rem;}
.pl20{padding-left: 2rem;}
.pr05{padding-right: 0.5rem;}
.pr10{padding-right: 1rem;}
.pr15{padding-right: 1.5rem;}
.pr20{padding-right: 2rem;}
.ps10{padding-left: 1rem;padding-right: 1rem;}
.ps20{padding-left: 2rem;padding-right: 2rem;}

.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: stretch;
}
.fl_center {align-items: center;}
.fl_cont_center {justify-content: center;}
.fl_left {justify-content: flex-start;}
.fl01 {flex: 1;}
.gap05{gap: 0.5rem;}
.gap10{gap: 1rem;}
.gap15{gap: 1.5rem;}
.gap20{gap: 2rem;}

.bk {color: rgb(30,30,30);}
.wh {color: rgb(255,255,255);}
.red {color: rgb(215,15,15);}
.blue {color: rgb(25,40,135);}
.orange {color: rgb(240,100,0);}
.yellow {color: rgb(250,230,50);}

.bg_bk {background-color: rgb(30,30,30);}
.bg_wh {background-color: rgb(255,255,255);}
.bg_red {background-color: rgb(215,15,15);}
.bg_blue {background-color: rgb(60,180,225);}
.bg_mizu {background-color: rgb(220,240,250);}
.bg_gray {background-color: rgb(230,230,230);}
.bg_gray_more {background-color: rgb(130,130,130);}

.kage {filter: drop-shadow(2px 2px 2px rgba(30,30,30,.6));}
.kage_box {box-shadow: 3px 3px 6px rgba(30,30,30,0.4);}

.maru {border-radius: 10px;}
.en {border-radius: 100px;}
.waku{border: 1px solid rgb(30,30,30);box-sizing: border-box;}
hr {border: 0px; border-top: 2px solid rgb(30,30,30);}
.kasen {border-bottom: 2px solid rgb(30,30,30)}
.sen_l {border-left: 8px solid rgb(25,40,135);padding-left: 1rem;}

a {border: none;text-decoration: none;}

iframe {aspect-ratio: 16/9;width: 100%;height: 100%;}

table {width: 100%;border: solid 1.5px rgb(50,50,50);}
td {padding: 0.5rem 1rem; border: solid 1px rgb(50,50,50);vertical-align: middle;}
hr {border: 0px; border-bottom: 1px solid rgb(100,100,100);}


@media screen and (max-width: 810px) {
    .pcOnly {display: none;}
    .spOnly {display: block;}
    .spCenter {text-align: center;}
    html {font-size: 60%;}
    .max_800, .max_1000, .max_1200{width: 95%;}
    .w25_100,.w30_100,.w40_100,.w50_100,.w70_100,.w80_100{width: 100%;}
    .pNo{padding: 0px;}
    .spmt10 {margin-top: 1rem;}
    .spmt20 {margin-top: 2rem;}
    #foot_logo {width: 50%;margin: 2rem auto 0;}
}


/*---------------------------------------*/


/* ヘッダーのスタイル */
header {
	background-color: rgb(200,200,200);
	padding: 1.5rem;
	z-index: 999;
}
#head {position: sticky;top: 0;z-index: 100;}

.logo {width: 40%;max-width: 300px;}
nav ul {
	margin: 0;
	padding: 0;
	display: flex;
}
nav ul li {
	list-style: none;
}
nav ul li a {
	color: rgb(0,0,0);
	text-decoration: none;
    margin-right: 2rem;
}
.burger {
	display: none;
	cursor: pointer;
}

.burger div {
	width: 25px;
	height: 3px;
	background-color: rgb(100,100,100);
	margin: 5px;
	transition: all 0.3s ease;
}

@media (max-width: 810px) {
    #header {padding: 1rem;}
    #head-set {height: 4rem;}
	nav ul {
		flex-direction: column;
		position: absolute;
		top: 7rem;
		left: 0;
		right: 0;
		background-color: rgb(100,100,100);
		padding: 10px;
	}
    .menu {
        transform: translateY(0);
        opacity: 0;
        transition: all .4s linear;
    }
    .menu.is-active {
        opacity: 1;
        transform: translateY(0);
    }
	nav ul li {
        position: relative;
        z-index: 9;
        font-size: 2rem;
		margin: 3rem 0;
        text-align: center;
	}
    nav ul li a {
        font-size: 2rem;
        color: rgb(255,255,255);
        text-decoration: none;
    }
	.burger {
		display: block;
	}

	.burger.open div:nth-child(1) {
		transform: rotate(-45deg) translate(-5px, 6px);
	}

	.burger.open div:nth-child(2) {
		opacity: 0;
	}

	.burger.open div:nth-child(3) {
		transform: rotate(45deg) translate(-5px, -6px);
	}
    #tel {width: 80%; margin: 3rem auto; padding: 2rem;}
}

/* フッターのスタイル */
#foot {background-color: rgb(50,50,50); color: rgb(255,255,255);}

#main {
    position: relative;
    background-image: url(../img/main.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 5rem;
}
#main p {
    position: relative;
    z-index: 10;
}
#main::before {
    content: '';
    background-color: rgba(255,255,255,0.4);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#tel_icon {}
#tel_icon:before {
    content: '';
    margin-right: 0.5rem;
    margin-bottom: 0.3rem;
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    background-image: url(../img/tel.png);
    background-size: contain;
    vertical-align: middle;
}

#go_web3 {
    background-image: url(../img/main.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
.button_wh a {text-decoration: none;color: rgb(255,255,255);}