﻿@charset "utf-8";
/*------------------------目次(box)-------------------------	*/
/*         〇:初期											*/
/*         〇:基本  （行目～行目まで）							*/
/*				1:共通(header・contact・btn・footer)			*/
/*				1:共通(SERVICE・COMPANY・CONTACT・PRIVACYPOLICYトップ)*/
/*         		2:index.htm	(→top→about→service→news→contact)*/
/*         		3:service.htm								*/
/*         		4:						*/
/*         		5:									*/
/*         		6:privacy policy.htm									*/
/*         		8:rules/index.htm							*/
/*         〇:769px以上の時 （行目～行目まで）					*/
/*				1:共通(body→header→side_bar→footer)			*/
/*         		2:index.htm	(→htop→news→concept→pickup→access→coupon)*/
/*         		3:topic.htm								*/
/*         		4:month/index.htm							*/
/*         		5:menu.htm									*/
/*         		6:shop.htm									*/
/*         		7:coupon.htm								*/
/*         		8:rules/index.htm							*/
/*         〇:768.9px以下の時 （行目～行目まで）				*/
/*				1:共通(body→header→side_bar→footer)			*/
/*         		2:index.htm	(→htop→news→concept→pickup→access→coupon)*/
/*         		3:topic.htm								*/
/*         		4:month/index.htm							*/
/*         		5:menu.htm									*/
/*         		6:shop.htm									*/
/*         		7:coupon.htm								*/
/*         		8:rules/index.htm							*/
/*----------------------------------------------------------*/
/*-------------------初期設定---------------------*/

*{
	margin:0px;
	padding:0px;
	box-sizing:border-box;
}

:root {
	/*色の定義*/
	--base:rgb(255,255,255);
	--main:rgb(205,216,228);
	--acc:rgb(28,56,111);
	--sub:rgb(1,16,45);
	--sub2:rgb(117, 117, 117);
	--moji:rgb(1,16,45);
	/*----------*/
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-size:17px;
	line-height:2em;
}

a {
	text-decoration:none
}
li {
	list-style:none;
	text-align: justify;
	padding-left: 27px;
	padding-right: 14px;
	}
h2 {
	color:rgb(1,16,45);
	font-size:50px;
	/*font-family:"Times New Roman", cursive;*/
}

/*-----------------------------------------------------*/

/*---------------------------------基本-------------------------------*/
/*-----------------1:共通---------------------*/
/*---------------------header--------------------------*/
#header {
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(255,255,255,0.8);
	backdrop-filter: blur(40px);
	width: 200px;
	height: 100vh;
	z-index: 999;
	padding-top: 4rem;
	box-shadow:0 0 10px 
				rgba(0,0,0,0.4);
}
.burger-wrap > li > a:hover {
	text-decoration: underline;
}

#sidelogo {
	max-width:100%;
	transform: translateX(-3%);
}
nav ul{
	list-style: none;
	text-align: center;
	font-weight: bold;
	color:rgb(1,16,45);
}
.burger-wrap > li > a {
	line-height: 30px;
	text-decoration: none;	
	color:rgb(28,56,111);
	font-size: 14px;
}

.container {
	height: calc((1078/1920)*100vw);
	width: 100%;
	position:relative;
}

/*--------------headerおわり---------------------------*/
/*---------------------contact--------------------------*/
.contact {
	height:auto;
	display:grid;
	background-color:rgb(205,216,228);
	text-align: center;
	grid-template-columns:auto;
	grid-template-rows: 135px auto 180px;
	grid-template-areas:
						"k"
						"l"
						"m";
}
.contact {
	padding-left:200px;
}
.contact > h2 {
	grid-area: k;
	align-self:end;
	text-align:center;
	}
.contact >p {
	grid-area: l;
	align-self:center;	
	padding: 30px;
}
.contact > a {
	grid-area: m;
	justify-self:center;	
	}
	/*--------------contacおわり---------------------------*/

	/*---------------------btn------------------------------*/
/*btn*/

a.btn--blue {
	color: #fff;
	background-color: rgb(28,56,111);
	border-bottom: 5px solid #020f1e;
	font-size: 1.25em;
	height: 4em;
	letter-spacing: 0.12em;
	padding: 1.5em 0 0 0.12em;
	width: 16.6em;
	text-decoration:none;
	position: relative;
	display: block;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.06em;
	text-align: center;
	border-radius:10px ;
}

a.btn--blue:hover {
	color: #fff;
	background: #757575;
	border-bottom: 0px solid #020f1e;
}
a.btn--blue:nth-child(1) {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/***追従するトップへ戻るボタン*/
.btn-pagetop {
	opacity: 0;
	position: fixed;
	z-index: 10;
	right: 10px;
	bottom: 10px;
    background: rgba(117,117,117,0.9);	
    padding-top: 21px;
    border: solid 1px;
    border-radius: 50%;
	transition: all .7s;
	pointer-events: none;
	width: 4rem;
	height: 4rem;
}
.pageTopBtn-in {
  opacity: 1;
  pointer-events: auto;
}
.btn-pagetop > a {
 color: #fff;
 font-weight:500;
 text-decoration: none;
}
/***トップへ戻るボタンここまで***/

	/*---------------------btn終わり----------------------*/

/*---------------------footer--------------------------*/
#footer {
	grid-area:f;
	font-size: 1em;
	line-height: 1.6em;
	text-align: justify;
	text-align:center;
	background: rgb(1,16,45);
	color:white;
	padding-left: 200px;
}
#footer > ul> li > a {
 color: white;
}
#footer ul {
	list-style-type: none;
	text-align: center;
	margin-left: 0;
	padding-left: 0;
}
#footer li  {
	display: inline;
}
#footer > ul {
	padding: 25px;
}
#footer > ul > li > a:hover{
	text-decoration: underline;
	}
	.sns > li > a{
		font-size: 50px;
	 }
	/*---------------------footer終わり----------------------*/
	/*---------------------タイトル------------------------------*/
.name > h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	color: white;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding-left:200px;
	font-size:57px;		
	font-family:"Times New Roman", cursive;
	text-shadow: 1px 2px 3px #757575;
	line-height: 52px;
	}
.name >img {
	width: 100%;
	height: 200px;
	object-fit: none;
}
.name {
	width: 100%;
	position: relative;
 }

#main > section> div> div > h2 {
	font-family: Constantia,'BIZ UDGothic', Meiryo, sans-serif;
	font-size:50px;	
	text-align: center;	
}

	/*---------------------タイトル終わり----------------------*/
	/*---------------アニメーション--------------------------*/
		/* 下から	ふわっ */ 
		.fadeUp {
			animation-name:fadeUpAnime;
			animation-duration:0.9s;
			animation-fill-mode:forwards;
			opacity: 0;
			}
			
			@keyframes fadeUpAnime{
				from {
					opacity: 0;
			transform: translateY(100px);
				}
			
				to {
					opacity: 1;
			transform: translateY(0);
				}
			}

/*背景色が伸びて出現 共通*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
	}
	
	@keyframes bgextendAnimeBase{
		from {
			opacity:0;
		}
	
		to {
			opacity:1;  
	}
	}
	.bgappear{
		animation-name:bgextendAnimeSecond;
		animation-duration:1s;
		animation-delay: 0.6s;
		animation-fill-mode:forwards;
		opacity: 0;
		}
		
		@keyframes bgextendAnimeSecond{
		0% {
		opacity: 0;
		}
		100% {
		opacity: 1;
		}
		}

	/*---------------アニメーション終わり--------------------------*/

	/*---------------------TOPページ------------------------------*/
/*トップ画像*/

.timage {
	object-fit:cover;
	position: absolute;
	width: 100%;
	height:100%;
	left:0;
	bottom:0;
	opacity: 0;
	animation: change-img-anim 20s infinite;
}

.timage:nth-of-type(1) {
	animation-delay: 0s;
}
.timage:nth-of-type(2) {
	animation-delay: 5s;
}
.timage:nth-of-type(3) {
	animation-delay: 10s;
}
.timage:nth-of-type(4) {
	animation-delay: 15s;
}

@keyframes change-img-anim {
	0%{ opacity: 0;}
	30%{ opacity: 1;}
	36%{ opacity: 1;}
	45%{ opacity: 0;}
	100%{ opacity: 0;}
	}

/*main*/
#tmain > h1{
	font-size: 60px;
	line-height: 1;
	color:white;
	text-align:center;
	font-family:"Times New Roman", cursive;
	text-shadow:0px 0px 10px rgba(0,0,0,0.3);
	position: absolute;
	top: 37%;
	left: 50%;
	}
.top2 {
	padding-top: 50px;
	padding-bottom: 50px;
	height:auto;
	padding-left: 200px;
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-template-rows: 45px auto 150px;
	grid-template-areas:
						"a b"
						"c b"
						"d b";
	}
.top2 > h2 {
	grid-area:a;
	align-self:end;
	text-align:center;
}
.top2 > div {
	grid-area:c;
	align-self:center;	
	}
.top2 > a {
	grid-area:d;
	justify-self:center;	
	margin-top: 30px;
}
.top2 > img {
	grid-area:b;
	width:80%;
	height:auto;
	align-self:center;
	justify-self:center;
	}
	.top2 > div> p{
	padding-left: 80px;
	text-align: justify; 
	padding-top: 5%;
}
	 
.top3 {
	padding-top: 50px;
	padding-bottom: 50px;
	height:auto;
	padding-left: 200px;
	/*background-color:rgb(205,216,228);*/
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-template-rows: 45px auto 150px;
	grid-template-areas:
						"e f"
						"e g"
						"e h";
	}
.top3 > h2 {
	grid-area:f;
	align-self:end;
	text-align:center;
}
.top3 > div {
	grid-area:g;
	align-self:center;	
	}
.top3 > a {
	grid-area:h;
	justify-self:center;	
	margin-top: 30px;	
}
	
.top3 > img {
	grid-area:e;
	width:80%;
	height:auto;
	align-self:center;
	justify-self:center;
	}
	.top3 > div> p {
	padding-right: 89px;
	text-align: justify; 
	padding-top: 5%;
 
}
#infomation{
	display: none;
}	
.modal-open {
	line-height: 30px;
	text-decoration: none;
	color: rgb(28,56,111);
 }
 
/*モーダルの横幅を変更したい場合*/
.modaal-container{
    max-width: 600px;
}/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;
}
.modaal-content-container > h2 {
	 text-align: center;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
.top4 {
	/*padding-top: 50px;*/
	padding-bottom: 50px;
	height:auto;
	padding-left: 200px;
	display:grid;
	grid-template-columns:1fr 1fr;
	grid-template-rows: 67.5px auto 90px;
	grid-template-areas:
						"i j"
						"i j"
						"i j";
	}
.top4 > h2 {
	grid-area:i;
	align-self:center;
	text-align:center;
	}
.top4 > div {
	grid-area:j;
	align-self:center;	
	}
.top4 > div > ul > li > a:hover {
	text-decoration:underline;
}
	.fas fa-times {
	display:none;
	}
	.delate {
	display:none;
	}
	.menu-close {
	 display: none;
	}
	#menu_btn_check {
	 display: none;
	}
	.top4 > div:nth-child(2) > ul:nth-child(1) > li:nth-child(2):hover {
 background: rgb(205,216,228);
}

/*----------------------SERVICE ページ------------------------*/
/*スクロールダウン全体の場所*/
.scrolldown4{
	/*描画位置※位置は適宜調整してください*/
position:absolute;
bottom:1%;
right:9%;
	/*矢印の動き1秒かけて永遠にループ*/
animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
		0%{bottom:1%;}
		50%{bottom:3%;}
	 100%{bottom:1%;}
}

/*Scrollテキストの描写*/
.scrolldown4 span{
	/*描画位置*/
position: absolute;
left:-26px;
bottom:10px;
	/*テキストの形状*/
color: #000;
font-size: 1.0rem;
letter-spacing: 0.05em;
/*縦書き設定*/
-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
	content: "";
	/*描画位置*/
	position: absolute;
	bottom: 0;
	right: -6px;
	/*矢印の形状*/
	width: 1px;
	height: 20px;
	background: #000;
	transform: skewX(-31deg);
}

.scrolldown4:after{
content:"";
	/*描画位置*/
position: absolute;
bottom:0;
right:0;
	/*矢印の形状*/
width:1px;
height: 50px;
background:#000;
}

 .intro {
	background-image: url(../images/bi.jpg);
	height: auto;
	padding-left: 200px;
}

.intro > h2 {
	text-align: center;
	padding-top: 70px
	 } 
.intro > ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.intro > p:nth-child(2) {
  padding-bottom: 500px;
  padding-top: 200px;
  padding-left: 200px;
  padding-right: 200px;
 }
 
 .intro > p:nth-child(4) {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
 }
 
 .intro > ul > li > a {
	font-weight: bold;
	color: rgb(28,56,111);
	background: #FFF;
	border: solid 3px rgb(28,56,111);
	border-radius: 10px;
	line-height: 1;
}
 .intro > p > a {
	font-weight: 500;
	letter-spacing: .08em;
	line-height: 2;
	text-decoration: none;
	color: #292929;
	border-bottom: solid;
 }
 div.flex-item > div > p > a{
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 2;
	text-decoration: none;
	color: #292929;
	border-bottom: solid;
 }

#agree > h2{
	font-size:50px;	
	text-align: center;	
	line-height: 1;
	padding-bottom: 50px;
}
/*----------------事業内容--------------*/
.flex-item{
  display: flex;
  justify-content: space-between;
}

.flex-item:nth-child(odd){
  flex-direction: row-reverse;
}
.flex-item__img {
  width: 38%;
  align-items: center;
  padding-right: 10px;
}

.flex-item__txt{
	width: 50%;}

.flex-item__txt h3 {
  font-size: 18px;
  padding: 10px 0;
padding-bottom: 15px;
}

div.flex-item > div > p {
 padding-bottom: 8%;
 text-align: justify;
}
.flex-item__img img{
	width: 100%;
	height: auto;
	object-fit: cover;	
	padding: 5%;
}

.flex-item {
 height:auto;
padding-left: 200px;
	
}
div.flex-item > div {
margin: auto;
}
div.flex-item> div > h3 {
 text-align: center;
 font-size:20px;

}
#agree {
	width: 100%;
	height: auto;
	padding-left: 200px;
	padding-bottom: 50px;
	padding-top: 50px;
}
/* 中の四角形 */

.flexbox01{
	display: flex;
	align-items: center;
	justify-content: center;
}
.flexbox01 > div{
	text-align : center;
	list-style: none;
	border: 1px solid rgb(28,56,111);
	min-height:180px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	margin:10px;
	flex:1;
}
div.ca > p {
 padding: 9px;
}

.flexbox01 > span {
	margin: 2%
}
.ca {
	text-align: center;
	display: flex;
	 align-items: center;
 justify-content: center;
 line-height: 1.4;
 }
 .ca >  p{
	font-weight: bold;
	font-size: 18px;
	font-feature-settings: "palt";
 }
 .ca > p > span {
	font-weight: normal;
	font-size: 0.7em;
	color: #7d7d7d;
 display: inline-block;
 }
 div.cb > p {
	position: absolute;
	top: 462%;
 }

/*----------------------COMPANY ページ------------------------*/
/*maintop*/
/*company1*/
.company1 > div > h2 {
	font-size: 25px;
	text-align:center;
}
.company1 {
	background-image: url(../images/bi.jpg);
	height:auto;
	padding-left: 200px;
}
.company1 > div {
	padding-top: 40px;
		max-width: 500px;
		margin: 0 auto;
	 }
.company1 >  img {
	width: 50%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
 }
.company1 > div > h3 {
	text-align: center;
	padding: 15px;
}
/*company2*/
.company2 > h2 {
	font-size: 25px;
}
		
 .company2 {
	 height:auto;
	 padding-left: 200px;
	 display:grid;
	 grid-template-columns:1fr 1fr;
	 grid-template-rows: 132px auto 101px;
	 grid-template-areas:
						 "f e"
						 "g e"
						 ". e";
	 }
 .company2 > h2 {
	 grid-area:f;
	 align-self:end;
	 text-align:center;
	}
 .company2 > div {
	 grid-area:g;
	 align-self:center;
	 padding-top:40px
	 }
	 
 .company2 > img {
	 grid-area:e;
	 width:80%;
	 height:auto;
	 align-self:center;
	 justify-self:center;
	 }
	 .company2 > div> p {
		max-width: 500px;
		margin: 0 auto;
		}
.company2 > div:nth-child(2) > p:nth-child(3) {
 padding-top: 30px;
}
#main > div {
	padding-left: 200px;
	padding-top: 50px;
	padding-bottom: 50px;
}
/*company3*/
 
.company3 > div > h2 {
	font-size: 25px;
	text-align: center;
	padding-left: 200px;
	padding-top:50px;
	padding-bottom: 50px;
}

.company3 > div > dl  {
	display: flex;
	flex-flow: row wrap;
	width: 83%;
	padding-left: 31%;
	padding-bottom: 50px;
}
.company3 > div > dl > dt{
	flex-basis: 15%;
	padding: 20px;
	background-color:rgb(28,56,111);
	color:#fff;
	border-bottom: 1px solid #ccc;
}
.company3 > div > dl > dd{
	flex-basis: 80%;
	padding: 20px;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
}
 
/*map*/
.map {
	 text-align: center;
	 padding: 3%;
	 padding-left: 15%;
}

 /*---------------お問い合わせ----------------------*/
 .form2 {
	padding-left: 200px;
 }
 
 .form1 {
	height: auto;
	padding-left: 200px;
	text-align: center;
}
 .form1 > h2{
	font-size: 25px;
	padding-top: 30px;
	padding-bottom: 25px;
}
 
 .loaded > li{
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 0;
}
.form2 > form > dl {
	align-items: center;
	justify-content: center;
	display: grid;
 }
 .form2 > form > dl > dd  > input{
	padding: 10px;
	margin-bottom: 10px;
}
.form2 > form> dl > dd > textarea {
	width: 100%;
 }
 
 .form2 > form > dl > dt> label> span {
	background: #ff3700;
	padding: 0 .3em;
	color: #fff;
	margin-left: .5em;
	font-size: 14px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 5px;
 }
 .form2 > form:nth-child(1) > dl:nth-child(1) > dt:nth-child(7) > label:nth-child(1) > span:nth-child(1) {
	background: rgb(117,117,117);
 }
 
 .btn {
	display: block;
	margin-inline: auto;
	padding: 1.5em;
	cursor: pointer;
	color: #fff;
	background-color: rgb(28,56,111);
	border-bottom: 5px solid #020f1e;
	height: 4em;
	width: 16.6em;
	text-decoration:none;
	position: relative;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.06em;
	border-radius:10px ;
	margin-bottom: 30px;
 }
 .btn:hover {
	color: #fff;
	background: #757575;
	border-bottom: 0px solid #020f1e;
}
  /*---------------お問い合せ確認----------------------*/
#cmain > section > form {
	padding-top: 50px;
	padding-bottom: 50px;
}
#cmain > section:nth-child(3) {
	padding-left: 200px;
}
.form1 > ul:nth-child(4) {
	padding-left: 26%;
}

.loaded > li > a {
	text-decoration: underline;
}
.form1 > ul:nth-child(4) > li:nth-child(4) {
	padding-bottom: 30px;
}

#cmain > section> form{
	text-align: center;
}

input.cbtn {
	cursor: pointer;
	color: #fff;
	background-color: rgb(28,56,111);
	border-bottom: 5px solid #020f1e;
	height: 2em;
	width: 7.6em;
	text-decoration: none;
	position: relative;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.06em;
	border-radius: 10px;
	margin-bottom: 30px;
}
input.dbtn {
	cursor: pointer;
	color: #fff;
	background-color: rgb(117,117,117);
	border-bottom: 5px solid #020f1e;
	height: 2em;
	width: 7.6em;
	text-decoration: none;
	position: relative;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.06em;
	border-radius: 10px;
	margin-bottom: 30px;
}

.cbtn:hover {
	color: #fff;
	background: #757575;
	border-bottom: 0px solid #020f1e;
}

.dbtn:hover {
	color: #fff;
	background: #757575;
	border-bottom: 0px solid #020f1e;
}
.text_center {
  text-align: left;
  display: inline-block;
}

.form_center {
	margin: 0 auto;
	margin: 16px auto;
	text-align: center;
}
ul.text_center {
	margin: 0 auto;
	padding-left: 0;
	list-style: none;
	display: inline-block;
}
table.formTable {
	margin: 0 auto;
}
/*送信完了*/

.form3 > p {
	padding: 10px;
 }
 section.form3 {
	height: 659px;
	padding-top: 76px ;
}
.conp_center {
	padding-left: 200px;
    margin: 0 auto;
    text-align: center;
}

/*------プライバシーポリシー-----------*/
.privacy1 {
	padding-left: 200px;
}
.privacy1 > section > p {
	padding: 30px;
}	 
.privacy1 > section > ul {
	padding-bottom: 30px;
}
#pmain  h2 {
	font-size: 25px;
}
.privacy1 > section > dl {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 30px;
}
.privacy1 > section dl > dt {
	padding: 5px;
}
.privacy1 > section {
	margin: 50px;
 }
 
 .privacy1 > section > ul > li {
	list-style: inside;
 }
 
.privacy1 > section > ul > li > ul> li {
	list-style: inherit;
	padding-left: 0;
 }


 /*-----------------@media screen and (max-width : 1200px)-------------------------------*/
@media screen and (max-width : 960px) {
	/*-----------------1:共通---------------------*/
	h2 {
		font-size: 25px;
		padding-top: 20px;
	}
	.image {
		position: absolute;
		width: 100%;
		opacity: 0;
		animation: change-img-anim 15s infinite;
	}
	#header {
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(40px);
    width: 200px;
    height: 100vh;
    z-index: 999;
    padding-top: 3rem;
    box-shadow:0 0 10px 
    			rgba(0,0,0,0.4);
}

	#header {
		position: sticky;
		top: 0px;
		z-index: 1;
		grid-area: h;
		width: auto;
		height:0;
  }

	#sidelogo {
	 	width:50px;
	 	margin-top:2.6em;
	 	transform: translateY(-4.4em);
	}
.h2side{
	font-size:1.5em;
}

/*ハンバーガーボタン(3本線)パーツ*/

.menu-btn {
    position: fixed;
    top: 0px;
    right: 0px;
    display: flex;
    height: 50px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: rgba(0,0,0,0);
    transition-duration: 0.3s;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: "";
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: rgb(0,0,0);
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}

/*ハンバーガーメニューパーツ*/

.hamburger-contents{
	background-color: rgb(255,255,255);
	color: rgb(28,56,111);
	position: fixed;
	max-width: 340px;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0 20px;
	transition-duration: 0.3s;
	z-index: 1;
	overflow: auto;
	transform: translateX(110%);
	width: 260px;

}

/*チェックボックス：オン・オフ動作のパーツ*/

#menu_btn_check:checked ~ .hamburger-contents{
	transform: translateX(0);
}
.burger-wrap > li:nth-child(5) > a:nth-child(1) {
	padding-right: 27px;
 }
 
#menu_btn_check:checked + .menu-btn{
	transform: translateX(340px);
	transition-duration: 0.3s;
}

/*閉じる動作のパーツ：ボタンか画面全体のマスクで閉じる*/

#menu_btn_check:checked ~ label.menu-mask{
	display: block;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0,.5);
	position: fixed;
	top: 0;
	left: 0;
}

.menu-close {
	display: block;
	background: rgb(83, 228, 238);
	text-align: center;
	margin-top: 15px;
}

.hamburger-contents{
	overflow: auto;
}

.hamburger-menu input[type="checkbox"]{
	transform: translateX(-50vw);
}

.burger-wrap{
list-style:none;
padding:0;
}
.burger-wrap > li{
	width: 100%;
	background-color:rgb(205,216,228);
	margin:10px auto; 
}
.menu-close {
display: block;
background: rgb(28,56,111);
color:#fff;
text-align: center;
padding: 8px;
margin-top: 8px;
letter-spacing:0.05rem;
}
.menu-close span{padding-left:5px}

.hamburger-menu h2{
text-align:center;
}

.hamburger-menu input[type="checkbox"]{
	transform: translateX(-50vw);
}
.name > h1 {
	padding-left: 0;
	}
/*------btn--------*/
.btn-pagetop {
  padding-top: 15px;
	width: 3rem;
	height: 3rem;
}
/*-----------------TOPページ@media screen and (max-width : 1200px)----------------*/
.container {
  height: calc((1200/1920)*100vw);
  width: 100%;
  position: relative;
}
#tmain {
grid-area:m;

}
#tmain > h1:nth-child(2) {
font-size: 30px;
 }
 
.top2{
	padding:0px;
	grid-template-areas: "a""c""d""b";
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	height: auto;
}
.top2 > div > p{
	text-align: justify;
  margin: 15px;
} 
.top2 img{
    display: block;
    padding: 20px;
    margin: 10px auto;
    text-align: center;
    width: 100%;
}
.top2 > div > p {
	padding-left: 0;
 }
 
.top3{
	padding:0px;
	grid-template-areas: "f""g""h""e";
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	height: auto;
}
.top3 img{
	display: block;
	padding: 20px;
	margin: 10px auto;
	text-align: center;
	width: 100%;
}
.top3 > div > p{
	text-align: justify;
	margin: 15px;
	padding-right: 0;
}
 .top4{
	padding:0px;
	grid-template-areas: "i""j";
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	height: auto;
 }
 .top4 > div {
  margin: 14px;
 text-align: center;
 }
 .top4 > div > ul> li {
	font-size: 16px;
	margin: 15px;
 }
 .modaal-content-container > h2 {
 font-size: 18px;
}

 .contact {
	padding:0px;
	grid-template-areas: "k""l""m";
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	height: auto;
	row-gap: 20px;
}
.contact > h2 {
	font-size: 25px;
 }
 .contact > a {
	margin-bottom: 30px;
 }
 .c_info {
  text-align: center;
}
/*---------footer@media screen and (max-width : 1200px)----------*/
 #footer {
	 padding: 0;
	 font-size: 14px;
 }
 #footer > .menu {
	word-spacing: 4px;
	padding: 15px;
}
#footer li {
	padding-left: 3%;
}
 .btn-pagetop {
	bottom: 30px;
}
.sns > li > a{
	text-align: center;
	font-size: 30px;
	padding: 0;
 }
 #header {
position: fixed;
width: 100%;
top: 0px;
}
#tmain > h1 {
	position: absolute;
	top:15%;
	left: 45%;
 }
 /*------serviceページ@media screen and (max-width : 1200px)--------*/
 .name >img {
	width: 100%;
	height: 200px;
 object-fit: cover;
}
.scrolldown4 {
 display: none;
}

div.flex-item > div > p {
	padding: 5%;
	text-align: justify;
 }
#agree {
	padding-left: 0;
 }
#agree > h2 {
 font-size: 25px;
}
.intro > p:nth-child(2) {
	padding: 52px;
 }
 .intro > p:nth-child(3) {
	padding-bottom: 10px;
 }
 
 
 .flexbox01 {
	display: block;
 }
 
 .intro > ul > li {
  padding-right: 5%;
  padding-top: 3%;
 }
 .intro {
	height: auto;
	padding-left: 0%;
}
.intro > h2 {
	text-align: center;
	 padding-top:20px;
	 }
 .flex-item{
	flex-direction: column;
	align-items: center;
}
.flex-item {
	height:auto;
 	padding-left: 0%; 
	 
 }
.flex-item:nth-child(odd) {
	flex-direction: column;
}

.flex-item__img {
	width: 100%;
	height: auto;
  	padding-right:0;
}
.flex-item__txt {
	width: 100%;
}
.flexbox01 {
	display: block;
 }
 .flexbox01 > span{
	animation-delay: 1s;
	/*transform: rotate(90deg) !important;*/
}
/*span.fadeUp{
	transform: rotate(90deg) !important;
	display: inline-block;
	height: 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}*/
 

 /*-------companyページ@media screen and (max-width : 1200px)-------*/
 .name > h1:nth-child(2) {
	font-size: 40px;
	position: absolute;
	left: 51%;
	top: 52%;
	line-height: 42px;
}
.scrolldown4 {
	display: none;
 }
	 
/*company1*/
.company1{
	padding:0;
	grid-template-areas: "a""c""b";
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	height: auto;
	padding-bottom: 0;
}
.company1 > div {
	grid-area:c;
	align-self:center;	
	margin-left: auto;
	margin-right: auto;
	}
.company1 > div > p{
	text-align: justify;
	margin: 15px;
} 
.company1 > img{
    display: block;
    padding: 20px;
    margin: 10px auto;
    text-align: center;
    width: 100%;
}
.company1 > div > h3 {
	text-align: center;
	margin: 20px;
	padding-bottom: 0%;
}
/*company2*/
.company2 {
	padding:0px;
	grid-template-areas: "f""g""e";
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	height: auto;
}
.company2 > div {
	margin-left: auto;
	margin-right: auto;
}
.company2 img{
	display: block;
	padding: 20px;
	margin: 10px auto;
	text-align: center;
	width: 100%;
}
.company2 > div > p{
	text-align: justify;
	margin: 15px;
}
.company2 > div:nth-child(2) > p:nth-child(3) {
  padding-top: 0;
}
/*company3*/
.company3 > div > h2 {
	 padding-top: 10px;
	 text-align: center;
	 padding-left:0;
	 padding-bottom: 10px;
}

.company3 > div > dl {
	width: 100%;
	padding-left:0;
	display: block;
}
.company3 > div > dl > dt {
	padding: 0;
	text-align: center;
	width:100%;
	margin: 0%;
}
.company3 > div > dl > dd {
	width:100%;
	border-bottom:none;
	padding: 0;
	text-align: center;
}

.map {
 text-align: center;
 width: 100%;
 padding-left:0;
}
/*-------------お問い合せ----------------------*/
.form1 {
	padding-left: 0;
 }
 .form2 {
	padding-left: 0;
 }
#cmain > section{
	padding-left: 0;
 }
 .form1 > ul > li {
  padding-left: 0;
 }
	#cmain > section > dl {
		padding-left: 0;
		padding: 5%;
	}
	#cmain > section:nth-child(3) {
	padding-left:0;
}
	#cmain > section.form1 > ul >li{
	padding-right:0;
}
	.form1 > p {
	padding:10px;
	 }
	 .form1 > ul:nth-child(4) {
	padding-left:0;
	}
	.form1 > ul:nth-child(4) {
 	padding: 10px;
}
	#cmain > section > dl {
	text-align: center;
}

.conp_center {
	padding-left: 0px;
}
section.form3 {
	height: 542px;
}
/*-------------プライバシーポリシー----------------------*/
.privacy1 {
		padding-left: 0;
	 }
	 #pmain > .name > h1 {
		position: absolute;
		left: 52%;
		top: 57%;
	 }
	 
	 #pmain  h2 {
		font-size: 17px;
	 } 
	 .privacy1 > section > ul > li {
		padding: 10px;
	 }
	 .privacy1 > section > dl{
		display: block;
		padding:10px
	 }
	 .privacy1 > section > dl > dt {
		text-align: center;
	 }
	 
	 .privacy1 > section  dl > dd {
		text-align: center;
	 }
	 .privacy1 > section > p {
		text-align: justify;
		padding: 10px;
	 }
.form1 > ul {
 padding-left: 0;
}
.privacy1 > section > ul > li {
	list-style: disc;
 }
 
.privacy1 > section > ul > li > ul> li {
	list-style: inherit;
	padding-left: 0;
 }
 
}


