/*
Theme Name: Gitai
Theme URI: 
Author: tomoyuki koseko
Author URI:  gitai theme
Version: 1.0
License: koseko

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@charset "UTF-8";


:root {
  --main-width: 95vw;
  --main-max-width:1440px;
}


body #wpadminbar {
/* bottom: 0 !important; */
top: auto;
bottom: 0;
}
html.js {
margin-top: 0 !important;
}

body {
	margin:0;
	padding: 0;
	color: #000;
/* 	font-family: "avenir next", avenir , "helvetica neue" ,helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; */
	font-family:  "helvetica neue" ,helvetica,YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
	font-size: 14px;
	line-height: 2em;
	font-weight: bold;
	background-color:#fff;
	background-repeat: repeat-x;
	background-position: left 110px;
	/* min-width: 980px; */
}

input {
max-width: 100%;
}

/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { 
	padding: 0;
	margin: 0;
	list-style:none;
}
h1, h2, h3, h4, h5, h6, p,dd {
  	margin:0; /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}
h1, h2, h3, h4, h5, h6{
	font-weight: bold;
	font-feature-settings: "palt";
}
h1{
	font-size:52px;
	font-weight: bold;
	letter-spacing: 0.3em;
	line-height: 1.8em;
	margin-bottom: 14px;
	
}
h2{font-size:24px; margin-bottom:1em;line-height: 1.8em;letter-spacing: 0.2em;}
h3{font-size:22px; padding: 0 0 20px;line-height: 1.8em;letter-spacing: 0.15em;/* font-weight: bold;margin-bottom:10px; */}


.big{font-size:23px;line-height: 2.5em;letter-spacing: 0.025em;font-weight: bold;}
.big2{font-size:20px;line-height: 1.8em;letter-spacing: 0.1em;font-weight: bold;}
.ec{font-size:96px;line-height: 1em;}

li{list-style:none; }

.li{
	list-style: initial;
	margin-left: 1em;}

strong{font-weight: bold;font-size:64px;line-height: 1.5em;}
.bold{font-weight: bold;}
.small{font-size:14px;}
figcaption{font-size:12px;text-align: center;}
.caption{
	font-size:10px;
	line-height: 1.8em;
	text-align: justify;
	}

img{max-width:100%; height:auto;}
img[src=""]{background:#eee;}
a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
}

/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
	color:#222;
	text-decoration: none;
}
a:visited {
	color:#222;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	color:#666;
	text-decoration: none;
	opacity:0.8;
}
/* a:hover img{opacity:0.5} */


a.button{
	display:inline-block;
	border:1px solid #000;
	padding:15px 20px;
	font-size:12px;
	letter-spacing:0.2em;
	}

.block{
	margin:auto;
	padding:0 0px;
	max-width: 960px;
	}
	
.block2{
	margin:auto;
	padding:0 0px;
	max-width: 1280px;
	}
	
.column{
	margin:0 auto;
	padding-bottom:50px;
	}
	
p{
	margin:0 0px 20px;
	text-align:justify;
	font-size: 14px;
	line-height: 2.2em;
	}
p>a, p>a:link{text-decoration:underline;text-decoration-style: dashed;}	




table{margin-bottom: 20px;font-size:14px;  border-collapse: collapse;
  border-spacing: 0;}
tr>td{border-top:1px solid #000;padding:5px 0;}
tr>td:first-of-type{font-weight: bold;}
tr:last-of-type>td{border-bottom:1px solid #000;}







.bold{font-weight:bold;}
.left{float:left;}
.right{float:right;}
.red{background:red;padding:0 0 0 10px;}
.center{text-align:center;}
.clearfix{clear:both;}
.off{display:none;}	
.vspace{height:50px;}
.vspace2{height:25px;}
.m20{margin-bottom: 20px;}
.m30{margin-bottom: 30px;}
.usd{
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
	}
.ma{margin:auto;}


.mmenunone{
	display:none;
	}
.white{color:#fff;}	
.ipad{display:none;}



/*display--------------------------------------------------------------  */
.db{display:block;}	
.dib{display:inline-block;}
.dg{
	display:inline-block;
	display: grid;
	}

/*table--------------------------------------------------------------  */
.border{
	height:1px;
	background:#00;
	}
.bdl{border-left:1px solid #ccc;}	
.bdr{border-right:1px solid #ccc;}	
.bdb{border-bottom:1px solid #ccc;}	
.bdt{border-top:1px dotted #000;}	
.round{
	border-radius:10px;
	}

/*table--------------------------------------------------------------  */
.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}

/*textsetting--------------------------------------------------------------  */

.ltext{font-size:135%;letter-spacing:0.1em;font-size:150%;}	

.inner,.inner15{padding:20px;}
.sinner,.inner15{margin:1px;}
.inner5{margin:5px;}
.inner10{margin:10px;}
.big120{font-size:120%;}
.small80{font-size:80%;    line-height: 2em;}
.small50{font-size:50%;}
.large{font-size:120%;}
.indent{text-indent: 2em;}
.gothic{	font-family: helvetica neue,helvetica, '小塚ゴシック Pro L','Kozuka Gothic Pro Light',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;}

.lead{	
	font-size:16px;
	letter-spacing:0.1em;}	
.tal{text-align:left;}
.tac{text-align:center;}
.tar{text-align:right;}
.padding{padding:20px;}


	
/*image-appearance--------------------------------------------------------------  */	
.trans{
	transition-property: background-color, width, height,opacity;
	transition-duration:0.35s;
	transition-timing-function:ease-in-out;	
	-ms-transition-property: background-color, width, height,opacity;
	-ms-transition-duration:0.35s;
	-ms-transition-timing-function:ease-in-out;	
	-webkit-transition-property: background-color, width, height,opacity;
	-webkit-transition-duration:0.35s;
	-webkit-transition-timing-function:ease-in-out;	
	}
	
.headimage{
	height:720px;
	}	
.bgimage{
	background-position:center center;
	background-size:cover;}

.wp-block-image{margin:auto;}

/*size-manipulation--------------------------------------------------------------  */	

.dw1{width:100%;}
.dw2{width:50%;}
.dw3{width:33.33%;}
.dw3x2{width:66.66%;}
.dw4{width:25%;}
.dw4x3{width:75%;}
.dw5{width:20%;}
.dw5x4{width:80%;}
.dw6{width:16.66%;}
.dw605{width:82.33%;}
.dw8{width:12.5%;}
.dw8x5{width:62.5%;}
.dw8x7{width:87.5%;}
.ipad, .iphone, .ipadh{display:none;}

.dh1{height:100vh;}
.dh2{height:50vh;}
.dh3{height:33.33vh;}
.dh4{height:25vh;}

.flex{
	display:-webkit-flex;
	display:flex;
	flex-wrap: wrap;
	width:100%;
	list-style-type:none;
	margin:0; padding:0;
}
.flex li{flex-basis:100%;}
.flex li>a {
	display:block;
	height: calc( var(--main-width) / 4);
	background-size:cover;
	background-position: center center;
	text-decoration:none;
	filter: grayscale(0) brightness(100%);
	transition: filter 0.3s ease-in ;
	opacity:1;
}
.flex li a span{
opacity: 0;
height: 10%;
background: rgba(0,0,0,0.8);
transition: opacity 0.3s ease-in;
padding: 45% 0;	
	
}
.flex li a:hover span{opacity:1;}
#suggests .flex li{flex-basis:25%;}
#suggests .flex li a{height: calc( var(--main-width) / 4);}

.flex li a:hover {filter: grayscale(1);}

a.more, .nav-previous>a, .nav-next>a{
	display: block;
	color:black;
	padding:20px 0;
	text-align: center;
	letter-spacing: 0.4em;
	border: 1px solid #000;
}
a.more:hover{background:#fff;}



/* ///////////////////////////////////////////////////////////////////////////////////////////////////////// */


.bgr{background:#ffdcc9;}
.bgg{background:#eaeaea;}
.bgr2{background:#b93f2a;}
.bgw{background:white;}








/* ///////////////////////////////////////////////////////////////////////////////////////////////////////// */

header#header{
	position: fixed;
	width:100%;
	z-index: 1000;
	background:#3f9;
}
header#header div#logo>div{
	margin-left: 20px;
}
header#header div#logo>div>a{padding:10px;}
.tc{background-color: #fff;　}
.tc2{　}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////// */

div#contentheader{
	display: table;
	width: 100%;
	height:80vh;
	padding-top: 60px;
	}
div#contentheader>div{
	max-width: 1280px;
	display: table-cell;
	vertical-align: middle;
	}
div#contentheader .pc ul li{
	width:100%;
	margin:auto;
	max-height: 810px;
	height:63.2vw;
	background-size: cover;
	background-position: center center center;
}
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////// */
input[type="text"] {
border: none;
padding: 10px;
border-radius: 5px;
font-size: 120%;
}

input[type="submit"] {
padding: 20px;
font-size: 18px;
border: none;
background: #aaa;
color: white;
border-radius: 5px;
width: 100%;
}
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////// */


@media screen and (max-width:768px) { 
	
	.ipad{
		display: block;
	}
	.pc{display: none;}
	
	.dw2,.dw3,.dw3x2{width: 100%;}
	.dw4,.dw4x3,.dw6,.dw8{width: 50%;}
	section .dw4{width: 100%;}
	.dw4x3{width: 100%;margin-bottom: 20px;}
	
	
	h1{font-size:36px;}
	h2{font-size:18px;}
	h3{font-size:22px;}
	.big{font-size:20px;letter-spacing: 0em;line-height: 2.25em;}
	.big2{font-size:16px;letter-spacing: 0.1em;}
	.vspace{height:30px;}
	
	input[type="submit"] {
	-webkit-appearance: button;
}
	.block{max-width: 600px;}
	
	strong{font-size: 44px;}

	p{font-size: 14px;
		
	}
	
	header#header #logo>.dw4{width: 50%;}
	
	#message div.dw3{
		width: 66%;
		float: none;
		text-align: center;
		margin: auto;
	}
	
}
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////// */