@charset "utf-8";
/* CSS Document */

/* A Modern CSS Reset */
*,*::before,*::after{box-sizing:border-box}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ol[class],figure,blockquote,dl,dd{margin:0}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}img:not([alt]){filter:blur(10px)}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/*all*/
.pc{
	display: block;
}

.pc_t{
	display: inline;
}

.tb{
	display: none;
}

.sp{
	display: none;
}

html{
	overflow-x: hidden;
	zoom: 70%;
}

.point,.voice,.youkou,.access{
	width:1080px;
	margin:0 auto;
}

.container{
	background:#EADED0;
	width: 100%;
	padding-bottom: 50px;
}

.title{
	font-family: kozuka-mincho-pro, serif;
	font-weight: 700;
	font-style: normal;
	text-align: center;
	color: #3F260F;
	font-size:17pt;
	height:200px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.big{
	font-size:2em;
}

/*side*/
#sidebanner a{
	display: block;
	background: url("img/shiryo.png")/*通常時画像*/ no-repeat scroll 0 0;
	width: 100px;
	height: 360px;
	text-indent:-9999px;
	position:fixed;
	right:-100px;
	top:30vh;
	z-index: 9;
	-webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.slideIn a{
	right:0 !important;
}

/*header*/
header{
	background:#fff;
	display: flex;
	width:100%;
	height:100px;
	align-items: center;
	justify-content: space-between;
}

.logo{
	margin-left:50px;
}

.h_button a{
	display: flex;
	align-items: center;
	justify-content: center;
	background:#f18c28;
	text-decoration: none;
	font-family: kozuka-gothic-pr6n, sans-serif;
	font-weight: 700;
	font-style: normal;
	color:#fff;
	font-size:28px;
	width:300px;
	padding:10px 20px;
	margin-right:50px;
}

.h_button img{
	display: inline;
	margin-right:20px;
}

/*btn*/
.btn_con {
	background:#fff;
	height:230px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 50px;
}

.btn a {
	display: inline-block;
	width:800px;
	height:100px;
	text-decoration: none;
	background: #EDD10A;
	text-align: center;
}

.btn p {
	display: flex;
	height: 100%;
	font-family: kozuka-gothic-pr6n, sans-serif;
	color: #3F260F;
	font-size: 45px;
	justify-content: center;
	align-items: center;
}

.bold{
	font-weight: 700;
	font-style: normal;
	font-size:1.2em;
}


/*top*/
.top{
	width:100%;
	height:972px;
	background:url("img/top.png");
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
}

.title_top {
	margin-top: -100px;
}

canvas#sineCanvas{
	width:100%;
}

div#canvas-container {
	width:100%;
	top: -100px;
	height: 0;
	position: relative;
}

/*info*/
.info {
    padding: 1.5em;
    text-align: center;
    font-size: 32px;
    font-family: kozuka-gothic-pr6n, sans-serif;
    font-weight: bold;
    color: #d24226;
}

/*point*/
.point .title{
	height:270px;
	line-height: 80px;
}

.point .det h2{
	display: flex;
	max-width: 1080px;
	margin:0 auto;
	align-items: center;
	height: 130px;
	font-family: kozuka-mincho-pro, serif;
	font-weight: 700;
	font-style: normal;
	color:#fff;
	font-size:32px;
}

.b1{
	background-image:url("img/bk_1.png");
	background-repeat: no-repeat;
	background-position: right bottom;
}

.b2{
	background-image:url("img/bk_2.png");
	background-repeat: no-repeat;
	background-position: bottom;
}

.b3{
	background-image:url("img/bk_3.png");
	background-repeat: no-repeat;
	background-position:right bottom;
}

.b4{
	background-image:url("img/bk_4.png");
	background-repeat: no-repeat;
	background-position:right bottom;
}

.bk_1{
	margin:0 -50vw;
	background:#EF5329;
}

.bk_2{
	margin:0 -50vw;
	background:#F18C28;
}

.bk_3{
	margin:0 -50vw;
	background:#C9B44C;
}

.bk_4{
	margin:0 -50vw;
	background:#56823F;
}

.sq{
	display: inline-block;
	width: 60px;
	height: 60px;
	background: #fff;
	transform: rotate(45deg);
	overflow: hidden;
	margin-right:1em;
}

.sq_inner {
	font-size: 45px;
	line-height: 60px;
	background: transparent;
	transform: rotate(-45deg);
	text-align: center;
}

.sq_1{
	color:#EF5329;
}

.sq_2{
	color:#F18C28;
}

.sq_3{
	color:#C9B44C;
}

.sq_4{
	color:#56823F;
}

.point .det{
	font-family: kozuka-mincho-pro, serif;
	font-weight: 400;
	font-style: normal;
	color:#3F260F;
	font-size:26px;
	margin-bottom:30px;
}

.point .det .fl{
	display: flex;
	height:330px;
}

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

.tx_o{
	height: 220px;
}

.dou{
	width:100%;
}

.pic{
	width:50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/*voice*/
.sishoho{
	margin-top:30px;
}

.sub_t{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 160px;
}

.sub_t h2{
	display: inline-block;
	background:#FF7300;
	color:#fff;
	width: 500px;
	text-align: center;
	padding: 5px 40px;
	padding-bottom:10px;
	border-radius: 15px;
	font-family: kozuka-mincho-pro, serif;
	font-weight: 400;
	font-style: normal;
	font-size:25px;
}

.sub_t .big{
	font-weight: 700;
	font-size:1.5em;
}

.voice .fl{
	display: grid;
    gap: 30px;
	grid-template-columns: 525px 525px;
}

.voice .det{
	background:#fff;
	padding: 1em;
}

.det.kanso {
	grid-column: 1/3;
}

.voice h3{
	font-family: kozuka-mincho-pro, serif;
	font-weight: 400;
	font-style: normal;
	color:#3F260F;
	font-size:25px;
	text-align: center;
	position: relative;
}

.voice .up {
	height: 100px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.voice h3::after{
	content: '';
	position: absolute;
	left: 50%;
	bottom: -10px;
	display: inline-block;
	width: 100px;
	height: 5px;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translate(-50%); 
	background-color: #F18C28; 
}

.voice img {
	margin: 0 auto;
}

.dw h4{
	font-family: kozuka-gothic-pr6n, sans-serif;
	font-weight: 700;
	font-style: normal;
	color:#F18C28;
	font-size: 20px;
	text-align: center;
}

.dw h5{
	font-family: kozuka-gothic-pr6n, sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #F18C28;
	font-size: 16px;
	margin: 0;
}

.dw p{
	font-family: kozuka-gothic-pr6n, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size:16px;
	color:#3F260F;
}

.insho .dw{
	padding-top:1.5em;
}

.dw ul {
    font-family: kozuka-gothic-pr6n, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
    color: #3F260F;
    padding-inline-start: 2em;
}

.dw ul li {
    margin-bottom: 0.5em;
}
.dw ul li:last-child {
    margin:0;
}

.dw ul li::marker {
    color: #F18C28;
}

/*youkou*/
.youkou h1 span {
    display: block;
    font-size: 0.75em;
    color: #d24226;
}

.tabs {
	margin-top: 50px;
	padding-bottom: 40px;
	background-color: #fff;
	width: 1080px;
	margin: 0 auto;
}

.youkou h2,.youkou p{
	text-align: center;
}

.youkou p{
	font-family: kozuka-gothic-pr6n, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size:20px;
	color:#3F260F;
	margin-bottom:30px;
}

.youkou h2{
	font-family: kozuka-gothic-pr6n, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size:30px;
	color:#f18c28;
	margin-bottom:15px;
}

.youkou table{
	width:80%;
	margin:0 auto;
	border-collapse:collapse;
	border:1px solid #f18c28;
}

.youkou tr{
	width:100%;
}

.youkou th{
	display: flex;
	background:#f18c28;
	color:#fff;
	width:100%;
	height:40px;
	align-items: center;
	justify-content: center;
	font-family: kozuka-gothic-pr6n, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size:20px;
}

.youkou td{
	display: block;
	padding:1em;
	font-family: kozuka-gothic-pr6n, sans-serif;
	font-weight: 500;
	font-style: normal;
	color:#3f260f;
	font-size:18px;
	text-align: center;
}

.youkou li{
	text-align: left;
	align-items: center;
	justify-content: center;
}

.kome{
	margin-top:1em;
}

.youkou ul{
	list-style: none;
	padding:0;
}

/*タブのスタイル*/
.tab_item {
	position: relative;
	width:50%;
	height: 110px;
	background-color: #C6BEAB;
	line-height: 110px;
	font-size: 45px;
	text-align: center;
	color: #3F260F;
	display: block;
	float: left;
	font-weight: bold;
	transition: all 0.2s ease;
}
.tab_item:hover {
	opacity: 0.75;
}

.tab_item:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -25px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #C6BEAB transparent transparent transparent;
  border-width: 25px 20px 0 20px;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
	display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
	padding: 40px 40px 0;
	clear: both;
	overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#sisho:checked ~ #sisho_content,
#sishoho:checked ~ #sishoho_content {
	display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item{
	background-color: #F18C28;
	color: #fff;
}

.tabs input:checked + .tab_item:after {
	border-color: #F18C28 transparent transparent transparent;
}

/*access*/
.access .det{
	width:100%;
	background:#fff;
	font-family: kozuka-gothic-pr6n, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size:25px;
	color:#3F260F;
	padding:25px 50px;
}

.access .up{
	text-align: center;
}

.access iframe{
	display: block;
	margin:0 auto;
	margin-top:25px;
}

/*footer*/
footer{
	display: flex;
	justify-content: center;
	align-items: center;
	background:#F18C28;
	width:100%;
	height:200px;
}

footer p{
	color:#fff;
	font-size:20px;
	font-family: kozuka-gothic-pr6n, sans-serif;
	font-weight: 300;
	font-style: normal;
}

/*responsive*/
@media screen and (max-width:1080px){
	html{
		zoom:100%;
	}
	
.pc,.pc_t{
	display: none;
}
.sp{
	display:none;
}
.tb{
	display: block;
}
	
	.top{
		height: 700px;
	}
	
.title_top {
	width: 50%;
}
	
div#canvas-containerSP {
	width:100%;
	top: -50px;
	height: 0;
	position: relative;
}
	
.point,.voice,.youkou,.access{
	width:100%;
}

.title{
	height: 170px;
}
	
.btn_con{
	height: 150px;
}
	
.btn a{
	width: 600px;
    height: 80px;
}
	
.btn p{
	font-size: 40px;
}

.info {
    font-size: 22px;
}
	
.point .title{
	font-size:15px;
	line-height:60px;
	height:220px;
}
	
.sq_tb{
	height:75%;
	margin-right: 1em;
}
	
.point .det h2{
	height:70px;
	font-size:22px;
}
	

.point .det{
	font-size: 16px;
}

	
.bk_1,.bk_2,.bk_3,.bk_4{
	margin:0;
	padding:0 1.5em;
}

.tx_o{
	height:auto;
}
	
.tx{
	padding:1em;
}
.voice .fl{
	gap:15px;
	grid-template-columns: auto 50%;
	padding:15px;
}
.det.kanso {
	grid-column: 1/3;
}
.tabs{
	width: 95%;
}
.tab_item{
	height:80px;
	line-height:80px;
	font-size: 42px;
}
	
.youkou h2{
	font-size:40px;
}

.youkou p{
	font-size:27px;
}
	
.youkou table{
	width:95%;
}
.youkou th{
	height:80px;
	font-size:35px;
}
.youkou td{
	font-size:27px;
}
.access iframe{
	width:100%;
}
}
@media screen and (max-width:767px){
	
.pc{
	display: none;
}
	
.sp{
	display: block;
}
	
	#bottombanner a{
		z-index: 9;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		text-decoration: none;
		background:#edd10a;
		font-family: kozuka-gothic-pr6n, sans-serif;
		font-weight: 700;
		color:#3f260f;
		width:100%;
		height:45px;
		bottom:-45px;
		-webkit-transition: all .4s;
		transition: all .4s;
	}
	
	#bottombanner img {
		height: 30px;
		margin-right: 10px;
	}
	
	.slideIn a{
		bottom:0 !important;
	}
	
	.btn_con{
		height:100px;
	}
	
	.btn a{
		width:100%;
		height: 60px;
	}
	
	.btn p{
		font-size: 23px;
    padding: 0 23px;
	}
	
	header{
		height:50px;
	}
	
	.logo{
		margin: 0 auto;
		width:100px;
	}
	
	.top{
		height:400px;
		background-size: cover;
	}
	
	.top img{
		width: auto;
		margin-top: -50px;
	}
	
	.title_top{
		margin:0;
	}

	.info {
		font-size: 16.5px;
		line-height: 2em;
		padding: 1em;
	}
	
	.pnt_con::before{
		top:-98px;
	}
	
	.point .title {
		font-size: 10px;
		line-height: 40px;
		height: 200px;
	}
	
	.point .det h2{
		height:auto;
		padding: 0.5em;
	}
	
	.sq_tb{
		height:60px;
	}
	
	.point .det{
		margin-bottom:1em;
	}
	.det p{
		line-height: 35px;
	}
	.point .det .fl{
		height:auto;
	}
	
	.b1{
		background:none;
}

	.b2{
		background:none;
}

	.b3{
		background:none;
}

	.b4{
		background:none;
}
	
	.po_2{
		flex-direction: column-reverse;
	}
	.po_3{
		flex-direction: column;
	}
	.pic{
		width: 100%;
		padding: 1em;
	}
.pic img {
	height: 250px;
}
	
	.tx{
		width:100%;
	}
	
	.title {
		height: 100px;
		font-size:17px;
	}
	
	.sub_t h2{
		width:80%;
		font-size:14px;
	}
	.sub_t{
		height:auto;
	}
	.voice .det{
		grid-column:1/3;
	}
	.voice .up{
		height:60px;
	}
	
	.insho .up{
		height:100px;
	}
	
	.dw img{
		width:60%;
	}
	
	.dw h4{
		margin:10px 0;
	}
	
	.dw p{
		font-size:13px;
		line-height:25px;
		margin-bottom:10px;
	}
	
	.kansoSP img {
    	width: auto;
		margin-top: 20px;
		margin-bottom: 15px;
	}
	
	.kansoSP_dw{
		position:relative;
		background:#FFFFFF;
		padding:18px;
		text-align:center;
		border:1px solid #3E260F;
	}
	
	.kansoSP_dw:after,.kansoSP_dw:before{
		border: solid transparent;
		content:'';
		height:0;
		width:0;
		pointer-events:none;
		position:absolute;
		bottom:100%;
		left:50%;
	}
	.kansoSP_dw:after{
		border-color: rgba(255, 255, 255, 0);
		border-top-width:10px;
		border-bottom-width:10px;
		border-left-width:10px;
		border-right-width:10px;
		margin-left: -10px;
		border-bottom-color:#FFFFFF;
	}
	.kansoSP_dw:before{
		border-color: rgba(62, 38, 15, 0);
		border-top-width:11px;
		border-bottom-width:11px;
		border-left-width:11px;
		border-right-width:11px;
		margin-left: -11px;
		margin-bottom: 1px;
		border-bottom-color:#3E260F;
	}

	
	.kansoSP p{
		margin:0;
	}
	
	.dw ul{
		font-size:13px;
		line-height: 25px;
	}
	
	.tab_item {
		height: 50px;
		line-height: 50px;
		font-size: 20px;
	}
	
	.tab_item:after{
		bottom:-15px;
		border-width:15px 10px 0 10px;
	}
	
	.tab_content{
		padding:20px 10px 0;
	}
	
	.youkou h2{
		font-size:24px;
		margin-bottom: 5px;
	}
	
	.youkou p{
		font-size:15px;
		margin-bottom:15px;
	}
	
	.youkou th{
		height:40px;
		font-size:20px;
	}
	
	.youkou td{
		font-size:13px;
	}
	
	.access .det{
		padding:15px 20px;
		font-size: 15px;
	}
	
	.access .det p{
		line-height: 25px;
	}
	
	.access iframe{
		height:500px;
	}
	
	footer{
		height: 130px;
	}
	footer p{
		text-align: center;
		font-size:13px;
	}
	.foot{
		margin-bottom:45px;
	}
}