@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);

/*--------------------------------------------body*/
html {font-size: 62.5%;}

body {
  background: #fff;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: normal;
  color: #221815;
  font-size: 1.8rem;
  line-height: 1.6em;
}
@media(max-width: 1600px){body {font-size: 1.7rem}}
@media(max-width: 1200px){body {font-size: 1.6rem}}
@media(max-width: 1024px){body {font-size: 1.5rem}}

.wrap {
  max-width: 84%;
  margin: 0 auto;
  position: relative;
}

@media screen and (max-width: 1024px) {.wrap {max-width: 86%;}}
@media screen and (max-width: 768px) {.wrap {max-width: 86%;}}

/* font */

.rymn {font-family: "a-otf-ryumin-pr6n","a-otf-gothic-mb101-pro";}
.grmnd{
  font-family: garamond-premier-pro-display, serif;
  font-style: normal;
  font-weight: 300;}
.fg {
  font-family: "franklin-gothic-urw", sans-serif;
  font-weight: lighter;}

.bold {font-weight: 500;}


/*  pc/sp visiable */

.pc-display {display: block;}
.sp-display {display: none;}

@media(max-width: 768px){
  .pc-display {display:none !important;}
  .sp-display {display: block !important;}
}



/*-----------------------------------------main_visual*/

#mv{
	background-image: url('../images/mv.png');
  background-attachment: fixed;
  background-position:center;
  background-size: cover;
  background-repeat: no-repeat;
}

#thanks #mv {
  height: 500px !important;
}

section.main_visual {
    padding-bottom: 2%;
}

.logo,.logo_thanks{
	width: calc(50vw);
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
  padding-top:calc(22%);
}

  .logo_thanks {
  width: calc(20vw);
  padding-top: 7%;
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
}

/*scroll-indicator*/

.scroll-idc {
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	top: auto;
	margin: auto;
	color: #000;
}

.scroll-idc:before {
	content: "";
	position: absolute;
	display: block;
	left: 1px;
	right: 0;
	bottom: 34px;
	top: auto;
	margin: auto;
	width: 0px;
	height: 20px;
	border-right: 1px solid rgba(0,0,0,.5);
}

@media screen and (-webkit-min-device-pixel-ratio: 2){
	.scroll-idc:before {
		width: 0px;
		border-right: 1px solid rgba(0,0,0,.6);
	}
}

.scroll-idc:after {
	content: "Scroll";
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	bottom: 9px;
	top: auto;
	margin: auto;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	font-size: 70%;
}

.scroll-idc-elm {
	position: absolute;
	display: block;
	color: rgba(0,0,0,0.75);
	left: 0;
	right: 0;
	top: auto;
	bottom: 30px;
	margin: auto;
	width: 16px;
	height: 28px;
	border-radius: 20px;
	border: 1px solid currentColor;
	z-index: 3;
	animation: scrollIndicatorAnimation 1s cubic-bezier(.77,0,.18,1) infinite alternate;
}

.scroll-idc-elm:before {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	width: 2px;
	height: 4px;
	background-color: currentColor;
	border-radius: 3px;
	animation: scrollIndicatorAnimationDot 2s cubic-bezier(.77,0,.18,1) infinite;
}


@keyframes scrollIndicatorAnimation {
	0%   { transform: translateY(-20px) scale(0.7); }
	100% { transform: translateY(-40px) scale(0.7); }
}

@keyframes scrollIndicatorAnimationDot {
	0%   { top: -12px; opacity: 0; }
	50%  { top: -12px; opacity: 1; }
	90%  { top:  12px; opacity: 1; } 
	100% { top:  -12px; opacity: 0; }
}


@media screen and (min-width: 1280px) {
	.scroll-idc-elm {
		bottom: 44px;
		transform: scale(1);
	}
	.scroll-idc:after {
		bottom: 0;
	}
	.scroll-idc:before {
		height: 30px;
	}
	
	@keyframes scrollIndicatorAnimation {
		0%   { transform: translateY(-20px) scale(1); }
		100% { transform: translateY(-40px) scale(1); }
	}
}


@media screen and (max-width: 768px)  {
  #mv{
    background-image:url("../images/mv_sp.png");
    background-attachment: scroll;
  }
}
/*---------------------------------------spmenu*/

@media screen and (max-width: 768px)  {

  #thanks #mv {
  height: 300px !important;
}

  #nav-drawer {
    position: relative;
  }

  .nav-unshown {
    display:none;
  }

  #nav-open {
    position: fixed;
    width: 39px;
    height: 26px;
    right: 0px;
    top: 24px;
    z-index: 999;
  }

  #nav-open span, #nav-open span:nth-child(2), #nav-open spanspan:nth-child(3) {
    position: absolute;
    height: 1px;
    width: 20px;
    background: #fff;
    display: block;
    content: '';
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .kuro {
    background: #000000e0 !important;
  }

  #nav-open span:nth-child(2) {
    bottom: 18px;
  }
  #nav-open span:nth-child(3) {
    bottom: 10px;
  }

  #nav-close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
  }

  #nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 90%;
    max-width: 500px;
    height: 100%;
    background: #fff;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%);
  }

  .nav_sp {
    padding: 8% 5%;
    line-height: 3;
    font-size: 1.1em;
  }

  .nav_sp li {
    border-bottom: dotted 1px #ccc;
  }
  .nav_sp li a {
    color: #222;
    letter-spacing: 2px;
  }

  #nav-input:checked ~ #nav-close {
    display: block;
    opacity: .5;
  }

  #nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
  }

  #nav-input:checked ~ #nav-open span{
    -webkit-transform: translateY(6px) rotate(-46deg);
      transform: translateY(6px) rotate(-44deg);
      transition: all 0.3s ease 0s;
  }

  #nav-input:checked ~ #nav-open span:nth-child(2) {
    opacity: 0;
  }
  #nav-input:checked ~ #nav-open span:nth-child(3) {
    -webkit-transform: translateY(-9px) rotate(45deg);
    transform: translateY(-9px) rotate(45deg);
    transition: all 0.3s ease 0s;
  }
}

@media screen and (max-width: 420px)  {
  #thanks #mv {
    height: 100px !important;
  }
  .logo {width: 80%;}
  .logo {
    width: 100%;
    padding-top: calc(60%);}
  .logo img {width: 50%;}
  .logo_thanks {
    width: calc(30vw);
    padding-top: 5%;
    margin: 0 auto;}
  #nav-open {
  	top: 24px;}
  #nav-open span, #nav-open span:before, #nav-open span:after {
    height: 1px;
    width: 20px;}
  #nav-open span:before {bottom: -5px;}
  #nav-open span:after {bottom: -10px;}
  .nav_sp {
    padding: 10% 7%;
    font-size: 75%;
  }
  #nav-content {width: 30vh;}

  #nav-input:checked ~ #nav-open span:after {
    transform: translateY(-10px) rotate(91deg);
  }
}

/*---------------------------------------nav*/

.fix_nav{
	display: block;
  width: 100%;
  padding-top: 2%;
  overflow: hidden;
  padding-right: 8%;
}


.nav {
	width: 55%;
	display: flex;
	float: right;
	justify-content: space-between;
}

.nav li {
	font-size: 75%;
	letter-spacing: 3px;
}

.nav li a:hover {
 	border-top: solid 1px #d4dad4;
  padding-top: 1.5em;
}

.nav li a.now {
  border-top: solid 1px #d4dad4;
  padding-top: 1.5em;
}

.clearfix:before, .clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}

.fixed {
  position: fixed;
	top: 0;
  right:0;
	padding-top: 2.5%;
  padding-bottom: 1.5%;
  padding-right: 8%;
	z-index: 100;
  background: #fff;
}

@media screen and (max-width: 768px)  {
  .fix_nav {display: none;}
}

/*----------------------------------------logo*/

.logo2 {width: 20%;}

@media screen and (max-width: 768px) {
  .logo2{margin-top: 5%}
}

@media screen and (max-width: 420px) {
  .logo2 {width: 40%;}
}


/*----------------------------------------section*/

#about { padding-top: 4%; }

.sec_even {
  display: grid;
  grid-template-areas: "area1 area2" "area1 area3";
  grid-template-rows: max-content auto;
  grid-template-columns: 39vw 41vw;
  justify-content: space-between;
  padding-top: 10%;
  overflow: hidden;
}

.sec_odd {
  display: grid;
  grid-template-areas: "area1 area2" "area3 area2";
  grid-template-rows: max-content auto;
  grid-template-columns: 41vw 39vw;
  justify-content: space-between;
  padding-top: 10%;
  overflow: hidden;
}

.sec_even .col_image { grid-area: area1 }
.sec_even .col_text { grid-area: area2; }
.sec_even .col_info { grid-area: area3; }

.sec_odd .col_image { grid-area: area2 }
.sec_odd .col_text { grid-area: area1; }
.sec_odd .col_info { grid-area: area3; }


.sec_ttl {
  font-size: 155%;
  letter-spacing: 0.35em;
  padding-bottom: 1.4em;
}
.txt,
.txt_en {
  padding-bottom: 1.5em;
  font-size: 80%;
  line-height: 1.9;
  letter-spacing: 0.1px;
  text-align: left;
}

.txt_en {
  letter-spacing: 0.5px;
  line-height: 1.65;
}
.url {
  letter-spacing: 0.2em;
  font-size: 110%;
  margin-bottom: 1em;
}

.address {
  margin-top: 1.5em;
  margin-bottom: 1em;
  font-size: 80%;
  letter-spacing: 0.1em;
}

img.map_katano {
  float: right;
  width: 67%;
  padding-top: 2%;
}


@media screen and (max-width: 420px) {
  #about { padding-top: 9%; }
  .txt_en { text-align: left; }
}

/*イメージ画像部分*/
.sec_odd .col_image {
  float: right;
  width: 39vw;
  display: inline-block;
}

.col_image img{
  padding-bottom: 4em;
  width: 100%;
}

/*info*/
.info { padding-top: 15vw; }
.info_url,
.info_icon { display: inline-block }

.info_icon { display: inline-flex; }

.info_icon li { margin-right: 16px; }
.info_icon img {
  height: 20px;
  width: auto;
  vertical-align: middle;
}

@media screen and (max-width: 1550px) { .sec_even { padding-top: 10%; } }

@media screen and (max-width: 768px) {
  #about { flex-direction: column; }
  
  .sec_odd, .sec_even {
    display: flex;
    flex-direction: column;
    margin-bottom: 10%;
  }
  .sec_odd .col_text,
  .sec_even .col_text { order: -1; }
  
  .col_text, .col_image { width: 100% !important; }
  
  .col_text { padding-bottom: 5%; }
  
	.sec01_right { 
		width: 100%;  
		padding-top: 1vh;
  }
	.sec02_right > p { width: 100%; }
	.info_icon { vertical-align: middle; }
  .sec02, .sec03 { padding-bottom: 10% }
  
  
  .map_katano::after {
  	width: 40vw;
  	right: 0;
  }
  .info_icon img { height: 20px; }
}

@media screen and (max-width: 420px) { .sec_ttl { font-size: 128%; } }

@media screen and (max-width: 2400px) { .info { padding-top: 13vw; } }
@media screen and (max-width: 2300px) { .info { padding-top: 9vw; } }
@media screen and (max-width: 2200px) { .info { padding-top: 6vw; } }
@media screen and (max-width: 1900px) { .info { padding-top: 4vw; } }
@media screen and (max-width: 1700px) { .info { padding-top: 0; } }
@media screen and (max-width: 1500px) { .info > p { line-height: 1.2; } }
@media screen and (max-width: 1000px) { .info_icon { width: 38%; } }
@media screen and (max-width: 420px) {
	.map_katano::after { width: 50vw; }
	.info_icon {
    width: 40%;
    vertical-align: middle;
  }
  .sp_btm { padding-bottom: 0 !important; }
}
@media screen and (max-width: 375px) { .info_icon { width: 35%; } }
@media screen and (max-width: 320px) {
  .url { font-size: 99%; }
  .info_icon {
    width: 30%;
  }
}


/*---------------------------------------instagram*/


.instagram-gallery{
  padding-top: 5%;
  display: flex;
  justify-content:space-between;
}

.instagram-gallery .cover {
  object-fit: cover;
  width: 8vw;
  height: 8vw;
}

@media screen and (max-width: 768px) {
	.instagram-gallery .cover {
	  width: 20vw;
	  height: 20vw;
  }
  .instagram-gallery li:nth-child(3)~li{ display: none; }
}


/*---------------------------------------mailform*/

.mailform {padding:10% 0 1%;}

.contact_form {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    line-height: 1.2;
    color: #000;
    display: flex;
    float: right;
    justify-content: space-between;
}
.contact_form li , .mes {
  font-size: 90%;
  font-family: "a-otf-ryumin-pr6n","a-otf-gothic-mb101-pro";
  padding:0 5% 1% 0;
  letter-spacing: 0.1em;
  line-height: 2;
  font-weight: bold;
}

.contact_form li:nth-child(3){
  padding-right: 0;
}

.form_en {
  font-size: 100%;
  letter-spacing: 0.2em;
  font-weight: 500;
}

.contact_input {width: 33%;}

input[type="text"], input.text,input[type="tel"]{
  background: #efeff0;
  border: none;
  margin: 13px 5px 4px 0;
  padding: 11px 10px;
  width: 100%;
}

textarea {
  background: #efeff0;
  border: none;
  margin: 10px 0 5px;
  width: 100%;
  padding: 10px;
  line-height: 1.8;
  height: 155px;
}

.mes {
  width: 100%;
  padding-right: 0;}

.submit {
  text-align: center;
}

.submit > p {
  font-size: 14px;
  font-family: "a-otf-ryumin-pr6n","a-otf-gothic-mb101-pro";
  letter-spacing: 0.1em;
  line-height: 2;
  padding-bottom: 7px;
  font-weight: bold;
}

input[type="submit"] {
  background: url('../images/form_send.png') no-repeat;
  background-size: 100%;
  border: none;
  height: 70px;
  width: 70px;
  text-align: center;
  cursor: pointer;
}

input[type="submit"]:hover {opacity: 0.6;}

@media screen and (max-width: 1100px)  {
	.contact_form li , .mes {
		font-size: 82%;
		letter-spacing: 0;}
	.form_en {
		font-size: 95%;
		letter-spacing: 1px;}
}


@media screen and (max-width: 768px) {
	.contact_form {display: block;}
	.contact_form li{padding-right: 0;}
	.contact_input {width: 50%;}
}

@media screen and (max-width: 420px) {
	.contact_input {width: 70%;}
}



/*---------------------------------------googlemap*/
.googlemap {
	padding-top: 5em;
}

.map_wrap {
	position: relative;
	height: 675px;
	overflow: hidden;
	clear: both;
}
#map_canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}
#map_canvas_sp {
	width: 100%;
	height: 100%;
}

/*----------------------------------------footer*/

footer {
	background: #eeefef;
  margin-top: 6%;
	padding: 5% 0 2%;
}
.ft_box {
	padding-top: 1.5%;
  display: flex;
  justify-content: space-between;
  font-size: .9vw;
}

.ft_box_wrap {
  min-height: 11vw;
}

.ft_box_ttl {
  position: relative;
}
.ft_box_ttl::after {
  content: "";
  background: url(../images/ft_slsh.png)no-repeat;
  background-size: 100%;
  position: absolute;
  height: 6vw;
  width: 5.5vw;
  left: 0;
  top: .2vw;
}

.ft_box_inr {
  display: inline-block;
  vertical-align: top;
  padding-left: 2.2vw;
}
.en {
  font-size: 1vw;
  letter-spacing: 1px;
}
.cnt { padding-left: 2.5vw; }
.bnk { padding-left: 4.3vw; }

@media screen and (max-width: 1600px) { .ft_box_wrap { min-height: 13vw; } }
@media screen and (max-width: 1400px) { .ft_box_wrap { min-height: 14vw; } }
@media screen and (max-width: 1300px) { .ft_box_wrap { min-height: 15vw; } }
@media screen and (max-width: 1100px) { .ft_box_wrap { min-height: 17vw; } }

@media screen and (max-width: 1000px) {
  .ft_cmp, .ft_cnt, .ft_bnk {
    display: flex;
    justify-content: left;
  }
  .ft_box { display: block; }
  .ft_box_wrap { min-height: 20vw; }
  .ft_box_ttl::after { width: 6.5vw; }
  .ft_box_inr { padding-left: 3.5vw; }
  .bnk { padding-left: 5.3vw; }
  .space { padding-left: 11vw; }
  .space2 { padding-left: 21vw; }
}

@media screen and (max-width: 768px) {
  .ft_box_ttl::after {
    height: 10vw;
    width: 8vw;
  }
  .ft_box_wrap { min-height: 25vw; }
  .space { padding-left: 5vw; }
  .space2 { padding-left: 18vw; }
}


@media screen and (max-width: 730px) {
  .ft_box { font-size: 1.8vw; }
  .ft_cmp,
  .ft_cnt,
  .ft_bnk {
    display: block;
    width: 72%;
    margin: 0 auto;
  }
  .ft_box_ttl::after {
    height: 13vw;
    width: 12vw;
  }
  .ft_box_inr { padding-left: 7.5vw; }
  .bnk { padding-left: 9.5vw; }
  .en { font-size: 2vw; }
  .space { padding-left: 0; }
  .space2 { padding-left: 0; }
}

@media screen and (max-width: 500px) {
  .ft_cmp, .ft_cnt, .ft_bnk { width: 95%; }
  .ft_box_ttl::after {
    height: 15vw;
    width: 14vw;
  }
  .ft_box_wrap { min-height: 32vw; }
  .ft_box_inr { padding-left: 8.5vw; }
  .min_h { min-height: 27vw; }
  .min_h2 { min-height: 23vw; }
  .bnk { padding-left: 13vw; }
}

@media screen and (max-width: 375px) {
  .ft_box { font-size: 1.7vw; }
  .en {
    font-size: 1.8vw;
    letter-spacing: 0;
  }
  .ft_cmp,
  .ft_cnt,
  .ft_bnk { width: 95%; }
  .ft_box_ttl::after {
    height: 19vw;
    width: 16vw;
    top: 31%;
  }
  .ft_box_inr { padding-left: 7vw; }
  .cmp { padding-left: 10.5vw; }
  .cnt { padding-left: 10.5vw; }
  .bnk { padding-left: 14vw; }
  .ft_box_wrap { min-height: 42vw; }
  .min_h { min-height: 35vw; }
  .min_h2 { min-height: 28vw; }
}

@media screen and (max-width: 360px) {
  .ft_box_inr { letter-spacing: -1px; }
  .cmp,
  .cnt,
  .bnk { letter-spacing: 0; }
  .min_h { min-height: 37vw; }
  .min_h2 { min-height: 30vw; }
}


/*----------------------------------------thanks*/
#thanks.header {
  background: url('../images/top_image.jpg') no-repeat center top / 100% auto;
  width: 100%;
  height: 300px;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.thanks_ttl {
  font-size: 1.4em;
  padding-bottom: 1.5em;
}
.thanks_mes { padding: 5em 0; }
.thanks_mes > p { line-height: 2; }

@media screen and (max-width: 420px) { #thanks.header { height: 100px; } }