@charset "utf-8";

/* ---------------------------------------- 
 - html
---------------------------------------- */
html,
body {
	margin: 0;
	padding: 0;
}
html{
    font-size: 62.5%;
}
html.hamburger-active { /* ハンバーガーメニュー */
	height: 100%;
	overflow: hidden;
	touch-action: none;
}
@media screen and (max-width: 320px) {
	html{
		font-size: 52.5%;
	}
}

/* ---------------------------------------- 
 - img
---------------------------------------- */
img {
	width: 100%;
}

/* ---------------------------------------- 
 - body
---------------------------------------- */
body{
	font-family: 'Lato', 'Noto Sans JP', 'Yu Gothic Medium', '游ゴシック Medium', 'Yu Gothic', '游ゴシック体', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
	font-size:16px;
	font-size:1.6em;
	color:#111;
	line-height:2.0;
	letter-spacing: 0.05em;
	text-size-adjust: 100%; /* 文字の拡大縮小を防ぐ */
	background-color: #6fbcc8;
}

/* font */
.ft-NotoSans {
	font-family: 'Noto Sans JP', sans-serif;
}
.ft-lato {
	font-family: "Lato", serif;
}

/* inview */
.inview {
    transition: 0.8s;
    opacity: 0;
    /*transform: translate(0,20px);*/
}
.inview.is-mv {
    opacity: 1.0;
    /*transform: translate(0,0);*/
}

/* telLink（スマホ用電話リンク） */
.telLink a {
	text-decoration: underline;
}

/* anchor-target（アンカーリンク箇所） */
.anchor-target { /* margin,paddingを使用しない箇所のみ */
	padding-top: 80px; 
	margin-top: -80px;
}

/* ---------------------------------------- 
 - #loading
---------------------------------------- */
#loading {
	position: fixed;
	z-index: 1000;
	background-color: #fff;
	width:100%;
	height: 100%;
	top:0;
	left: 0;
	animation: disappear 0.8s ease-in-out 0.8s both;
}
@keyframes disappear {
	0% {
		display: block;
		opacity: 1;
	}
	99% {
		display: block;
		opacity: 0;
	}
	100% {
		display: none;
		opacity: 0;
		visibility: hidden;
	}
}
html.onload body div#loading {
	animation-play-state: paused;
}
#loading .loader,
#loading .loader:after {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
#loading .loader {
	display:none;
	z-index: 1000;
	margin: auto;
	margin-top: -25px;
	margin-left: -25px;
	font-size: 5px;
	position: absolute;
	top:50%;
	left:50%;
	text-indent: -9999em;
	border-top: 2px solid rgba(204, 204, 204, 0.2);
	border-right: 2px solid rgba(204, 204, 204, 0.2);
	border-bottom: 2px solid rgba(204, 204, 204, 0.2);
	border-left: 2px solid #ccc;
	transform: translateZ(0);
	animation: load8 1.1s infinite linear;
}
@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ---------------------------------------- 
 - header
---------------------------------------- */
#header {
	padding: 0 25px;
	border-bottom: solid 2px #fff;
	margin-bottom: 3px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content:space-between;
}
#header .logo {
	width: 32%;
	max-width: 305px;
}
#header .logo-ttl {
	width: 65%;
	max-width: 615px;
	margin-left: auto;
}
@media screen and (max-width: 768px) {
	#header {
		padding: 15px 5%;
		height: auto;
		display: block;
	}
	#header .logo {
		width: 60%;
		margin: 0 auto 15px;
	}
	#header .logo-ttl {
		width: 75%;
		margin: 0 auto;
	}
}

/* ---------------------------------------- 
 - hamburger
---------------------------------------- */
.hamburger {
	position: fixed;
    top: 15px;
    right: 15px;
	margin: auto;
	z-index: 100;
	background-color: #111;
	border-left: 0;
	width: 90px;
	height: 75px;
    cursor: pointer;
    transition: .3s;
}
.hamburger .link {
    display: flex;
	flex-direction: column; 
	align-items: center; 
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    transition: .3s;
    text-decoration: none;
}
.hamburger i {
	position: absolute;
    top: 25px;
	left: 50%;
    display: block;
    width: 36px;
    height: 1px;
    background-color: #fff;
    transform: translate(-50%, 0);
    transition: .3s;
}
.hamburger i::after{
	display: block;
    width: 36px;
    height: 1px;
    margin-top: 9px;
    content: '';
    transition: .3s;
    background-color: #fff;
}
.hamburger .txt {
	position: absolute;
    bottom: 10px;
	color: #fff;
	font-size: 1.2rem;
}
.hamburger .txt.close {
	display: none;
	opacity: 0;
}
/* fixed */
#header.fixed .hamburger{	
	width: 65px;
	height: 65px;
}
#header.fixed .hamburger i {
    top: 18px;
}
/* is-active */
.hamburger.is-active {
	background-color: #fff;
}
.hamburger.is-active::before {
	display: none;
}
.hamburger.is-active i {
	margin-top: 7px;
    transform: translate(-50%, 0) rotate(-45deg);
	background-color: #111;
}
.hamburger.is-active i::after {
	transform: rotate(90deg);
	margin-top: 0;
	background-color: #111;
}
.hamburger.is-active .txt {
	display: none;
	opacity: 0;
}
.hamburger.is-active .txt.close {
	display: block;
	opacity: 1;
	color: #111;
}
@media screen and (max-width: 1400px) {
	.hamburger {
		width: 60px;
        height: 55px;
        right: 2%;
	}
	.hamburger i {
		top: 15px;
		width: 25px;
	}
	.hamburger i::after {
		margin-top: 7px;
		width: 25px;
	}
	.hamburger .txt {
		bottom: 7px;
		font-size: clamp(1.0rem, 1.4vw, 1.2rem);
	}
	/* fixed */
	#header.fixed .hamburger{	
		width: 50px;
		height: 50px;
	}
	#header.fixed .hamburger i {
		top: 15px;
	}
}

/* ---------------------------------------- 
 - gnavi
---------------------------------------- */
#gnavi{
	background: url("/~touousai/assets/images/common/menu_bg.png");
	margin:0 auto;
	position: fixed;
	top: 0;
	right: 0;	
	text-align:left;
	overflow: auto;
	width: 500px;
    height: 100%;
    transition: .8s;
	opacity: 0;
    z-index: 1;
    visibility: hidden;
}
#gnavi.is-active{
	opacity: 1;
    z-index: 90;
    visibility: visible;
}
#gnavi a{
    transition: .3s;
    position: relative;
}
#gnavi > .inner{
	width: calc(100% - 70px);
	margin:0 auto;
	padding:18vh 0 10vh;
}
/* gnavi_list */
#gnavi ul.gnavi_list {
	font-size:2.4rem;
	line-height: 1.6;
}
#gnavi ul.gnavi_list li {
	text-indent: -1.0em;
	margin-left: 1.0em;
	margin-bottom: 1.0em;
}
#gnavi ul.gnavi_list li a:hover {
	text-decoration: none;
}
#gnavi ul.gnavi_list li:last-child {
	margin-bottom: 0;
}
#gnavi ul.gnavi_list li .date {
	font-size:2.0rem;
}
/* #gnavi-overlay */
#gnavi-overlay {
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10;
	background-color: #222;
	opacity: 0;
	visibility: hidden;
	transition: all .6s;
	cursor: pointer;
}
#gnavi-overlay.is-active {
	opacity: .3;
	visibility: visible;
}
@media screen and (max-width: 768px) {
	#gnavi{
		width: 80%;
	}
	#gnavi > .inner{
		width: 94%;
		margin:0 auto;
		padding:12vh 0 5vh;
	}
	/* gnavi_list */
	#gnavi ul.gnavi_list {
		font-size:2.0rem;
	}
	#gnavi ul.gnavi_list li .date {
		font-size:1.5rem;
	}
}

/* ---------------------------------------- 
 - #container
---------------------------------------- */
#container {
	width:100%;
	margin:0 auto;
	position: relative;
    /*overflow: hidden;*/
	display: flex;
	justify-content: center;
}
@media screen and (min-width: 769px) {
	#container .sp {
		display:none !important;
	}
}
@media screen and (max-width: 768px) {
	#container {
		overflow: hidden;
	}
	#container .pc {
		display:none !important;
	}
}

/* container-menu */
#container-menu {
	width: 20%;
	max-width: 300px;
	margin-left: 2%;
}
#container-menu .menu-box {
	margin: 5vh auto 0;
	position: sticky;
	top: 0;
}
#container-menu .menu-box .box-ttl {
	font-size: 3.0rem;
	font-size: clamp(2.4rem, 1.6vw, 3.0rem);
	line-height: 1.6;
	position: relative;
	text-align: center;
	margin-bottom: 0.7em;
}
#container-menu .menu-box .box-ttl span {
	position: relative;
	display: inline-block;
	padding: 0 50px;
}
#container-menu .menu-box .box-ttl span::before,
#container-menu .menu-box .box-ttl span::after {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 40px;
    height: 1px;
    border-top: 1px solid #000;
}
#container-menu .menu-box .box-ttl span::before {
    left:0;
}
#container-menu .menu-box .box-ttl span::after {
    right:0;
}
#container-menu .menu-box .menu-list {
	width: 100%;
	border: solid 1px #000;
	padding: 25px 5% 30px;
	background: url("/~touousai/assets/images/common/menu_bg.png");
}
#container-menu .menu-box .menu-list ul.list {
	font-size:2.2rem;
	line-height: 1.6;
}
#container-menu .menu-box .menu-list ul.list > li {
	text-indent: -1.0em;
	margin-left: 1.0em;
	margin-bottom: 0.7em;
}
#container-menu .menu-box .menu-list ul.list > li a:hover {
	text-decoration: none;
}
#container-menu .menu-box .menu-list ul.list > li:last-child {
	margin-bottom: 0;
}
#container-menu .menu-box .menu-list ul.list > li > ul.date {
	font-size:1.8rem;
	margin-left: 1.0em;
}
/* container-main */
#container-main {
	/*margin-left: 28%;*/
	width: 72%;
	margin: 0 3%;
	max-width: 1000px;
	min-height: 100vh;
	box-sizing: border-box;
	z-index: 2;
}
#container-main > .inner {
	width: 100%;
	min-height: 100vh;
	margin: 0 auto;
	border-left: solid 2px #fff;
	border-right: solid 2px #fff;
	position: relative;
}
@media screen and (max-width: 1024px) {
	/* container-menu */
	#container-menu {
	  display: none;
	}
	/* container-main */
	#container-main {
		margin: 0 auto;
		width: 100%;
	}
	#container-main > .inner {
		width: 94%;
		/*max-width: 640px;
		position: relative;*/
	}
}

/* ---------------------------------------- 
 - contents
---------------------------------------- */
#contents {
	border-top: solid 2px #fff;
	border-bottom: solid 2px #fff;
}
#contents .main-contents {
	padding: 40px 3% 60px;
	border-top: solid 2px #fff;
}
@media screen and (max-width: 1024px) {
	/*#contents {
		border-top: none;
	}
	#contents .main-contents {
		border-top: none;
	}*/
}
@media screen and (max-width: 768px) {
	/* main-contents */
	#contents .main-contents {
		padding: 30px 3% 40px;
	}
}

/* ---------------------------------------- 
 - page-ttl（下層ページタイトル）
---------------------------------------- */
#page-ttl {
	font-size: 3.8rem;
	line-height: 1.6;
	padding: 45px 3%;
	text-align: center;
	border-bottom: solid 2px #fff;
    margin-bottom: 3px;
}
@media screen and (max-width: 768px) {
	#page-ttl {
		font-size: 3.0rem;
		line-height: 1.6;
		padding: 25px 3%;
	}
}

/* ---------------------------------------- 
 - link-btn（共通ボタン）
---------------------------------------- */
/* link-btn */
.link-btn a {
    position: relative;
    line-height: 1.6;
    display: inline-block;
	text-decoration: none;
	box-sizing: border-box;
	border: solid 1px #111;
	border-radius: 50px;
	text-align: center;
	padding: 10px 40px 10px 30px;
	color: #111;
	transition: .3s;
}
.link-btn a::after {
    content: '';
    display: inline-block;	
    background-image: url(/~touousai/assets/images/common/ico_arw.svg);
    background-size: contain;
    vertical-align: text-bottom;
    background-position: left top;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    right: 20px;
	width: 15px;
    height: 7px;
    transform: translate(0, -50%);
}
/* blank */
.link-btn.blank a::after {
    width: 11px;
    height: 11px;
    background-image: url(/~touousai/assets/images/common/ico_blank.svg);
}
@media screen and (min-width: 769px) {
	/* link-btn */
	.link-btn a:hover {
		background-color:#111;
		color: #fff;
	}
	.link-btn a:hover::after {
		background-image: url(/~touousai/assets/images/common/ico_arw_wht.svg);
	}
	/* blank */
	.link-btn.blank a:hover::after {
		background-image: url(/~touousai/assets/images/common/ico_blank_wht.svg);
	}
}
@media screen and (max-width: 768px) {
	.link-btn a {
		font-size: 1.4rem;
		padding: 7px 35px 7px 30px;
	}
	.link-btn a::after {
		right: 13px;
	}
}

/* ---------------------------------------- 
 - footer
---------------------------------------- */
#footer {
	padding: 40px 40px 50px;
	border-top: solid 2px #fff;
	margin-top: 3px;
	text-align: center;
}
#footer .sns-box .sns-ttl {	
	font-size: 2.0rem;
	margin-bottom: 0.7em;
}
#footer .sns-box ul.sns-list {
	display: flex;
	justify-content: center;
}
#footer .sns-box ul.sns-list li {
	height: 38px;
	margin: 0 20px;
}  
#footer .sns-box ul.sns-list li a {
	display: block;
	height: 100%;
	transition: .3s;
}    
#footer .sns-box ul.sns-list li img {
	width: auto;
	height: 100%;
}
#footer .sns-box ul.sns-list li a:hover {
	opacity: 0.6;
}
#footer .copy {
	font-size: 1.2rem;
		margin-top: 40px;
}
@media screen and (max-width: 768px) {
	#footer {
		padding: 40px 5%;
	}
	#footer .sns-box .sns-ttl {	
		font-size: 1.8rem;
	}
	#footer .copy {
		font-size: 1.1rem;
	}
}

/* ---------------------------------------- 
 - padding / margin
---------------------------------------- */
.pdB5 { padding-bottom:5px !important; }
.pdB10 { padding-bottom:10px !important; }
.pdB20 { padding-bottom:20px !important; }
.pdB30 { padding-bottom:30px !important; }
.pdB35 { padding-bottom:35px !important; }
.pdB45 { padding-bottom:45px !important; }
.pdB80 { padding-bottom:80px !important; }
.pdB100 { padding-bottom:100px !important; }
.pdB120 { padding-bottom:120px !important; }
.pdB140 { padding-bottom:140px !important; }
.pdB160 { padding-bottom:160px !important; }

.pdT5 { padding-top:5px !important; }
.pdT10 { padding-top:10px !important; }
.pdT15 { padding-top:15px !important; }
.pdT20 { padding-top:20px !important; }
.pdT25 { padding-top:25px !important; }
.pdT30 { padding-top:30px !important; }
.pdT35 { padding-top:35px !important; }
.pdT40 { padding-top:40px !important; }
.pdT45 { padding-top:45px !important; }
.pdT50 { padding-top:50px !important; }
.pdT55 { padding-top:55px !important; }
.pdT60 { padding-top:60px !important; }
.pdT65 { padding-top:65px !important; }
.pdT70 { padding-top:70px !important; }
.pdT75 { padding-top:75px !important; }
.pdT80 { padding-top:80px !important; }
.pdT85 { padding-top:85px !important; }
.pdT100 { padding-top:100px !important; }
.pdT110 { padding-top:110px !important; }
.pdT115 { padding-top:115px !important; }

.pdT0_1em { padding-top:0.1em !important; }
.pdT1em { padding-top:1em !important; }
.pdT1_5em { padding-top:1.5em !important; }
.pdT2em { padding-top:2em !important; }
.pdT2_5em { padding-top:2.5em !important; }
.pdT3em { padding-top:3em !important; }

.pdR5 { padding-right:5px !important; }
.pdR10 { padding-right:10px !important; }
.pdR25 { padding-right:25px !important; }
.pdR50 { padding-right:50px !important; }

.pdL5 { padding-left:5px !important; }
.pdL10 { padding-left:10px !important; }
.pdL20 { padding-left:20px !important; }
.pdL25 { padding-left:25px !important; }
.pdL35 { padding-left:35px !important; }
.pdL40 { padding-left:40px !important; }
.pdL50 { padding-left:50px !important; }
.pdL70 { padding-left:70px !important; }
.pdL90 { padding-left:90px !important; }
.pdL95 { padding-left:95px !important; }
.pdL100 { padding-left:100px !important; }
.pdL1em { padding-left:1em !important; }
.pdL2em { padding-left:2em !important; }

.mgB10 { margin-bottom:10px !important; }
.mgB20 { margin-bottom:20px !important; }
.mgB25 { margin-bottom:25px !important; }

.mgT10 { margin-top:10px !important; }
.mgT15 { margin-top:15px !important; }
.mgT20 { margin-top:20px !important; }
.mgT30 { margin-top:30px !important; }
.mgT35 { margin-top:35px !important; }
.mgT40 { margin-top:40px !important; }
.mgT45 { margin-top:45px !important; }
.mgT60 { margin-top:60px !important; }
.mgT80 { margin-top:80px !important; }

.mgT0_1em { margin-top:0.1em !important; }
.mgT1em { margin-top:1em !important; }
.mgT1_5em { margin-top:1.5em !important; }
.mgT2em { margin-top:2em !important; }
.mgT3em { margin-top:3em !important; }

.mgL5 { margin-left:5px !important; }
.mgL10 { margin-left:10px !important; }
.mgL15 { margin-left:15px !important; }
.mgL20 { margin-left:20px !important; }
.mgL30 { margin-left:30px !important; }
.mgL35 { margin-left:35px !important; }
.mgL40 { margin-left:40px !important; }
.mgL45 { margin-left:45px !important; }

.mgR5 { margin-right:5px !important; }
.mgR10 { margin-right:10px !important; }
.mgR15 { margin-right:15px !important; }
.mgR20 { margin-right:20px !important; }
.mgR30 { margin-right:30px !important; }
.mgR35 { margin-right:35px !important; }
.mgR40 { margin-right:40px !important; }
.mgR45 { margin-right:45px !important; }