@charset "utf-8";
/* CSS Document */
html,
html * {
	margin: 0;
	box-sizing: border-box;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

body{
	/*display: grid;*/
	margin-left: auto;
	margin-right: auto;
}

header{
	margin: 0;
	padding:15px 0px;
}

main{
	padding-top: 20px;
	padding: 0;
  	background-size: cover;
  	background-position: center;
}

.wrapper{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

footer{
	margin-top: auto;
	width: 100%;
	text-align: center;
	padding-top: 5px;
}

details {
	margin-top: 0.5em;
	margin-left: 1em;
	margin-bottom: 0.5em;
}

details > summary {
	margin-bottom: 0.5em;
}

details > p {
	margin-left: 1em;
	margin-bottom: 0.5em;
}

span.bold   {font-weight: bold;}

/* ---------------------------------------------------------------------------------------------------- */
/* Company Log Header */
.complogo{
	float: left;
	padding-left: 10px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: auto;
	height: clamp(45px, 10vw, 65px);
}

/* ---------------------------------------------------------------------------------------------------- */
/* Desktop View NaviMenu */
.navmenu{
	float: right;
	padding-top: 20px;
	padding-right: 50px;
}

.navmenu ul{
	list-style-type: none;
	margin: 0;
}

.navmenu ul li{
	display: inline-block;
}

.navmenu ul li a{
	text-decoration: none;
	color: #2F322A;
	text-align: center;
	font-size: 18px;
	display: block;
	text-transform: uppercase;
	padding: 5px;
	margin-top: 18px;
}

.btntextchange{
    /*テキストの基点とするためrelativeを指定*/
  	position: relative;
    /*ボタンの形状*/
  	/*border: 1px solid #555;
  	border-radius:25px;
	padding: 20px;
	display: inline-block;*/
    min-width:100px;
    text-align: center;
    text-decoration: none;
    outline: none;
    transition: all .2s;
}

.btntextchange:hover{
	/*background:#ffffff;*/
  	color :#000000;
}

.btntextchange span{
  	position: absolute;
  	left: 50%;
  	top:50%;
    transform:translate(-50%,-50%);
    transition: all .4s;
  	display: block;
  	white-space: nowrap;
}

.btntextchange span:nth-child(2){
  	opacity:0;
}

.btntextchange:hover span:nth-child(1){
  	opacity:0;
}

.btntextchange:hover span:nth-child(2){
  	opacity:1;
}

/* -------------------- Desktop View NaviMenu Footer -------------------- */
.navmenu_ft ul{
	list-style-type: none;
	margin: 0;
}
.navmenu_ft ul li a{
	text-decoration: none;
	color: #2F322A;
	text-align: center;
	font-size: 10px;
	display: block;
	text-transform: uppercase;
	padding: 5px;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Tablet View Hamburg Menu */
.tbmenu_box {
  position: fixed;
  /*top: 1px;
  right: 10px;*/
  top: 33px;
  right: 10px;
  display: flex;
  height: 30px;
  width: 30px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  /*background: #3584bb;*/
  /*background: #ffffff;*/
}
.tbmenu_box span,
.tbmenu_box span:before,
.tbmenu_box span:after {
  content: "";
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  /*background: #ffffff;*/
  /*background: #3584bb;*/
  background: #000;	
  position: absolute;
}

.tbmenu_box span:before {
  bottom: 8px;
}
.tbmenu_box span:after {
  top: 8px;
}
#tbmenu_check {
  display: none;
}
#tbmenu_check:checked ~ .tbmenu_box span {
  background: rgba(255, 255, 255, 0);
}
#tbmenu_check:checked ~ .tbmenu_box span::before {
  bottom: 0;
  background: #fff;	
  transform: rotate(45deg);
}
#tbmenu_check:checked ~ .tbmenu_box span::after {
  top: 0;
  background: #fff;	
  transform: rotate(-45deg);
}
#tbmenu_check:checked ~ .tbmenu_content {
  left: 0;
}
.tbmenu_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;
  z-index: 80;
  background-color: #3584bb;
  transition: all 0.5s;
}

.tbmenu_list {
  padding: 70px 10px 0;
}
.tbmenu_item {
  border-bottom: solid 1px #ffffff;
  list-style: none;
  text-transform: uppercase;
}
.tbmenu_link {
  display: block;
  width: 100%;
  font-size: 25px;
  box-sizing: border-box;
  color: #ffffff;
  text-decoration: none;
  padding: 9px 15px 10px 0;
}

/* ---------------------------------------------------------------------------------------------------- */
/*  Main */
.row:before, .row:after {
	content: "";
	display: text-align;
}

.row:after{
	clear: both;
}

.col{
	width: 100%;
}

/* ---------- body ---------- */
.bodyimgbox{
	width: 100%;
	max-width: 100%;
  	height: 100vh;
  	background-image: url("../image/Main.svg");
  	background-size: cover;
  	background-position: center;
}

.bodyrighttop{
	position: fixed;
  	top: 0;
  	right: 0;
  	border-top: 70vh solid #82B3CB;
  	border-left: 50vw solid transparent;
	z-index: -99;
}

.bodyleftbottom{
	position: fixed;
  	bottom: 0;
  	left: 0;
	border-bottom: 40vh solid #CCCCCC;
  	border-right: 25vw solid transparent;
	z-index: -99;
}

/* ---------- Title Box ---------- */
.titlebox{
	/*background-color: #000000;*/
	/*background-image: url("../image/FireWorks2.png");*/
	max-width: 100%;
	width: 100%;
	height: auto;
	background-size: cover;
	padding: 50px 0 50px 0;
	color: #FFFFFF;
	text-align: left;
}

.fluid {
  width:70vh;/*横幅*/
  height: 40vh;/*縦幅*/
  background:#82B3CB;/*背景色*/
  animation: fluidrotate 10s ease 0s infinite;/*アニメーションの設定*/
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}

.titlebox img {
	/*width: clamp(200px, 95vw, 1700px);*/
	height: clamp(60px, 19vw, 300px);
	/*height: clamp(30px, 25vh, 300px);*/
	padding-left: 20px;
}

.titlebox h1{
	font-size: clamp(60px, 10vw, 100px);
	font-weight: 20px;
	margin-bottom: 5px;
}

.titlebox h2
{
	font-size: clamp(20px, 10vw, 30px);
	font-weight: 20px;
	margin-bottom: 50px;
}

/* ---------- Contents Box ---------- */
.contentsbox,
.contentsbox_center,
.contentsbox_left,
.contentsbox_right{
	padding:  20px 0;
	color: #000000;
	text-align: center;
}

.contentsbox{
	width: clamp(300px, 100vw, 1000px);
	margin-right: auto;
	margin-left: auto;
}

.contentsbox_center{
	width: clamp(300px, 100vw, 100%);
	margin-right: auto;
	margin-left: auto;
}

.contentsbox_left{
	width: clamp(300px, 100vw, 90%);
	margin-right: auto;
}

.contentsbox_right{
	width: clamp(300px, 100vw, 70%);
	margin-left: auto;
}

.contentsbox img,
.contentsbox_center img,
.contentsbox_left img,
.contentsbox_right img{
	margin-bottom: 20px;
}

.imgwidth{
	width: clamp(60px, 90vw, 600px);
}

.contentsbox h1,
.contentsbox_center h1,
.contentsbox_left h1,
.contentsbox_right h1{
	font-size: clamp(30px, 3vw, 40px);
	/*font-size: 40px;*/
	font-weight: 20px;
	margin-bottom: 5px;
	padding-top: 20px;
}

.contentsbox h2,
.contentsbox_center h2,
.contentsbox_left h2,
.contentsbox_right h2{
	font-size: clamp(20px, 1.8vw, 23px);
	/*font-size: 20px;*/
	font-weight: 20px;
	margin-bottom: 45px;
	padding-bottom: 10px;
}

.contentsbox h3,
.contentsbox_center h3,
.contentsbox_left h3, 
.contentsbox_right h3{
	font-size: clamp(18px, 1.8vw, 22px);
	/*font-size: 18px;*/
	font-weight: 20px;
	margin-top: 0px;
	padding-top: 30px;
	margin-bottom: 10px;
}

.contentsbox ul,
.contentsbox_center ul,
.contentsbox_left ul,
.contentsbox_right ul{
	width: fit-content;
	margin: 0;
	padding-top: 0px;
	padding-bottom: 25px;
}

/* ---------- contactbox ---------- */
.contactbox {
	clear: both;
	/*width: 700px;*/
	/*width: 700px;*/
	width: clamp(450px, 80vw, 700px);
	background-color: #eeeeee;
	border-radius: 30px;
	border: 1px solid #444444;
	font-size: 100%;
	margin: auto;
	/*z-index: 0;*/
}

.contactbox ul.inq-ul {
	font-weight: bold;
	list-style: none;
}

.contactbox li { 
	padding: 2px 0px 3px 2px;
 }

.contactbox strong { 
	color: red;
	font-size: 90%;
 }

.contactbox .submit {
	text-align: center;
}

.contactbox input.btn { 
	border:  2px #000000 solid;
	padding: 8px 20px;
	border-radius: 30px; 
	color: #000000;
	text-decoration: none;
	width: 40%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
 }

.contactbox input.text { 
	font-size:90%;
	padding: 1px 2px 1px 2px;
	text-align: left;
	border: 1px solid #999;
	background: #fff;
	width: clamp(300px, 100vw, 90%);
	height: 1.2em;
}

.contactbox textarea { 
	font-size:90%;
	padding: 1px 2px 1px 2px;
	margin: 0px 0px 10px 0px;
	text-align: left;
	border: 1px solid #999;
	background: #fff;
	font-family: inherits;
	width: clamp(300px, 100vw, 90%);
}

.contactbox select.category { 
	font-size:90%;
	width: 11em;
	border: 1px #999 solid;
	background: #FFF;
	height: 1.45em;
}

.contactbox form-tbl {
	margin-left: 1.5em;
}

.contactbox form {
	border-collapse: collapse;
	margin: 1em 0;
}

.contactbox form th, #form td {
	border: 1px solid #666;
	padding: 8px;
}

.contactbox form th {
	white-space: nowrap;
	background: #e8e8e8;
}

.contactbox form td {
	background: #fff;
}


/* ---------- PolictTerm Box ---------- */
.policytermbox{
	padding: 20px 20px 20px 20px;
	color: #000000;
	width: clamp(350px, 85vw, 900px);
	text-align: left;
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.circled-number {
	list-style-type: none;
	padding-left: 2em;
	text-indent: -2em;
}

.policytermbox h2{
	font-size: clamp(17px, 1.8vw, 25px);
	font-weight: 20px;
	margin-bottom: 5px;
}

.policytermbox h3{
	font-size: clamp(15px, 1.8vw, 20px);
	font-weight: 20px;
	margin-bottom: 5px;
}

.policytermbox ul{
	width: fit-content;
	margin: 0;
	padding: 0 0 25px 50px;
}

/* ---------- Access ---------- */
.access_route{
	padding: 0;
	color: #000000;
	display: inline-block;
}

.access_map {
	margin: 0 2em;
}

.access_route li {
	margin-bottom: 20px;
	text-align-last: left;
	list-style-type: none;
}

.access_notice ul {
	padding-top: 0px;
	padding-bottom: 0px;
}

.covid19_notice li {
	margin-top: 5px;
	list-style-type: square;
}

/* ---------- Other Text ---------- */
.center_block{text-align: center; display: block;}
.center_inblock{text-align: center; display: inline-block;}
.right_block{text-align: right; display: block;}
.right_inblock{text-align: right; display: inline-block;}
.left_block{text-align: left; display: block;}
.left_inblock{text-align: left; display: inline-block;}
.end_block{text-align: end; display: block;}
.end_inblock{text-align: end; display: inline-block;}

.text1{
	font-size: clamp(18px, 3vw, 38px);
	font-weight: 35px;
	margin-bottom: 10px;
}

.text2{
	font-size: clamp(20px, 3vw, 35px);
	font-weight: 32px;
	margin-bottom: 10px;
}

.text3{
	font-size: clamp(19px, 3vw, 30px);
	font-weight: 28px;
	margin-bottom: 10px;
}

.text4{
	font-size: clamp(17px, 3vw, 25px);
	font-weight: 23px;
	margin-bottom: 10px;
}

.text5{
	font-size: clamp(15px, 3vw, 20px);
	font-weight: 23px;
	margin-bottom: 5px;
	padding-bottom: 0;
}

.text6{
	font-size: clamp(12px, 3vw, 17px);
	font-weight: 10;
	margin-bottom: 10px;
}

.text7{
	font-size: clamp(10px, 3vw, 13px);
	font-weight: 10;
	margin-bottom: 10px;
}

.minchotext{
	/*font-size: min(125%, 9vw);*/
	font-size: clamp(18px, 3vw, 25px);
	font-weight: 20px;
	letter-spacing: 0.25em;
	font-family: "游明朝 Demibold",YuMincho Demibold,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN",serif;
	white-space: nowrap;
	margin: 20px 15px 0 0;
}

/* ---------- ボタン ---------- */
.button{
	border:  .5px #000000 solid;
	padding: 1px 15px;
	border-radius: 30px; 
	color: #000000;
	text-decoration: none;
	transition: .3s;
}

.button:hover {
	color: #fff;
  	/*background: #82B3CB;*/
	background: #000;
}

/* ---------- 沿革 ---------- */
.history{
	width: min(80%, calc(1024px * 0.8));
	padding: 0 0 20px;
	margin: auto;
}

.history dt,dd {
	padding: 5px;
}

.history dt {
	font-weight: bold;
}

/* ---------- 概要 ---------- */
.outline{
	width: min(90%, calc(1920px * 0.6));
	padding: 0;
	margin: 0 auto auto auto;
}

.outline th,td {
	border: 1px solid #000000;
	padding: 20px;
}

.outline th {
	width: 200px;
	font-weight: bold;
}

/* ---------- トップボタン ---------- 
Safariで使えない。。。
#page-top {
    position: fixed;
    right: 5px;
    bottom: 10%;
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    transform: rotate(90deg);
    font-size: 90%;
    line-height: 1.5rem;
    color: #737373;
    padding: 0 0 0 35px;
    border-top: solid 1px;
}
#page-top::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 15px;
    border-top: solid 1px;
    transform: rotate(35deg);
    transform-origin: left top;
}
*/



/* ---------------------------------------------------------------------------------------------------- */
/* Footer */
.footertext{
	font-size: 1%;
	/*font-size: 13px;*/
	margin-top: 5px;
	margin-bottom: 3px;
	text-align: center;
	width: 100%;
}

/* ---------------------------------------------------------------------------------------------------- */
/* Smart Phone 縦 */
@media screen and (max-width: 600px) and (orientation: portrait) {
	
	.bodyimgbox{
		background-image: url("../image/Main_portrait.svg");
		width: 100%;
		max-width: 100%;
  		height: 100vh;
  		background-size: cover;
  		background-position: center;
	}
	
	.contactbox{
		width: 95%;	
	}
	
}

/* ---------------------------------------------------------------------------------------------------- */
/* Smart Phone / Tablet View */
@media screen and (min-width: 100px) and (max-width: 1023px){
	
	.navmenu{
		/* 非表示 */
		display: none;
	}
	
	.tbmenu {
		/* 表示 */
    	display:block;
  	}
	
	.row {
		padding: 0;
	}
	
	.contentsbox,
	.contentsbox_center,
	.contentsbox_left,
	.contentsbox_right{
		width: 100%;
 		margin-left: auto;
		margin-right: auto;
		padding-left: 3%;
		padding-right: 3%;
	}
	
	.blocktoinblock{
		display: inline-block;
	}

	.outline th,
	.outline td{
  		width:100%;
  		display:block;
		text-align: center;
	}
	
	#map {
		width: 100%;
  		height: 300px;
  		overflow: hidden;
	}

	#map iframe {
  		width: 100%;
  		height: 600px;
  		margin-top: -150px;
	}
}

/* ---------------------------------------------------------------------------------------------------- */
/* DeskTop View */
@media screen and (min-width: 1024px){
	
	.navmenu{
		/* 表示 */
		display: block;
	}
	
	.tbmenu {
		/* 非表示 */
    	display:none;
  	}
	
	.row {
		padding: 0 5%;
	}
	
	.col{
		float: left;
		padding: 0px 7px 14px;
	}

	.colhalf{
		/*border: 1px solid #000000;*/
		float: left;
		width: 50%;
		padding: 0;
		text-align: center;
	}
	
	.coltriple{
		/*border: 1px solid #000000;*/
		float: left;
		width: 33%;
		padding: 0;
		text-align: center;
	}
	
	#map {
  		width: 100%;
  		height: 500px;
  		overflow: hidden;
	}

	#map iframe {
  		width: 100%;
  		height: 860px;
  		margin-top: -170px;
	}
}