@charset "utf-8";
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

dd {
    display: block;
    margin-inline-start: 0;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

body {
	line-height:1;
    margin: 0;
    padding: 0;
}

html { line-height: 0;}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a,
a:visited{
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
    text-decoration: none;
    color: #FFF;
}

a:hover,
a:active {
    color: #FFF;
}

a:hover {
  transition: 0.3s ease-in-out;
}


del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

input, select {
	vertical-align:middle;
}

li,ul {
	list-style: none;
}


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

clearfix

*****************/
.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
}

.clearfix {
		display: inline-table;
		min-height: 1%;
}

/* Hides from IE-mac */
* html .clearfix {
		height: 1%;
}
.clearfix {
		display: block;
}
/* End hide from IE-mac */



/***********   COMMON settng ***********/
body {
    font-family: 'Shippori Mincho', serif;
    font-size: 16px;
    line-height: 1.8;
    background: #FFF;
    -webkit-text-size-adjust: 100%;
}

.pc_disp {display: block;}
.sp_disp {display: none;}
.pc_img {display: inline-block;}
.sp_img {display: none;}

a img:hover,
input[type=image]:hover {
    opacity: .5;
}

.left { float: left;}
.right { float: right;}

.bg_bk {
	background:rgba(25,26,25,1.00);
	color: #FFF;
	padding-bottom: 80px;
}

.txt_box {
	margin: 80px auto 0;
}

.img_box img { 
	width: 100%;
	margin:15px auto;
}

#wrap {
	text-align: justify;
	text-justify:auto;
}

section {
	width: 1100px;
	margin: 120px auto;
}

.inner_box {
	width: 950px;
	margin: auto;
}

.slide_container {
	margin-top: 30px;
}

.map_box {
	position: relative;
}

.map {
	mix-blend-mode: overlay;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left:0;
	z-index: 2;
}
.map img { width: 100%; height: 100%;}

/***********   TEXT SETTING ***********/

p {	margin-bottom: 1.5rem;}

.txt_L {
	font-size: 1.5rem;
	text-decoration: underline;
	margin: 30px auto;
	color: #333;
}


.txt_center { text-align: center;}

h2 { 
	font-size: 2.0rem;
	margin-bottom: 1.2rem;
	font-weight: normal;
}

h3 {
	font-size: 2.5rem;
	font-family: 'Gilda Display', serif;
	letter-spacing: 1px;
	font-weight: normal;
}

h4 {
	color: #3a4952;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
	font-weight: normal;
}

.txt_copy {
	font-size: 0.8rem;
	margin-top: 30px;
	color: #CCC;
	text-align: center;
}

/***********   CONTENTS SETTING ***********/

header {
	background: url("../images/img_kv.jpg") no-repeat top center;
	background-size: cover;
	width: 100vw;
	min-height: 80vh;
}

h1 { 
	text-align: right;
	padding: 40px 20px;
}

.intro {
	text-align: center;
	margin: 80px auto;
}


#sec01 .left {
	width: 47%;
	margin-right: 6%;
}
#sec01 .right {
	width: 47%;
}


#sec02 .left {
	width: 52%;
	margin-right: 3%;
	padding-top: 50px;
}
#sec02 .right {
	width: 45%;
}

#sec02 dl {
	margin: 50px auto;
	font-size: 0.8rem;
}

#sec02 dl img {
	width: 100%;
}

#sec02 dt {
	width: 20%;
	margin-right: 5%;
	margin-bottom: 20px;
	float: left;
	clear: left;
}
#sec02 dd {
	width: 75%;
	float: left;
	margin-bottom: 20px;
}

#sec04 .slide_box {
	width: 100%;
	margin: 30px auto 0;
}

.slideB img{
	margin: 15px auto 30px;
}

.slideC img {
	width: 90%;
	margin: 15px auto;
}

.slideC li {
	border: 1px #CCC solid;
	text-align: center;
	padding: 20px;
}

.slideC h3 {
	font-size: 1.8rem;
}
.slideC p {
	margin-bottom: auto;
}

.slideC .caption {
	text-align: justify;
		width: 90%;
	margin: auto;
}

.slideC .txt_M {
	font-size: 1.6rem;
	font-family: 'Gilda Display', serif;
}
.slideC .txt_S {
	font-size: 0.8rem;
	text-align: justify;
}
.slideC .txt_bottom {
	position: absolute;
	bottom: 15px;
	left: 10%;
}

#story {
	background: url("../images/bg_story.jpg") no-repeat top;
	background-attachment: fixed;
	background-size: cover;
	width: 100%;
	padding: 60px 0;
	margin: auto;
	color: #FFF;
}

#story .inner_box {
	width: 100%;
	margin: auto;
}

#story .contents_box {
	width: 950px;
	margin: auto;
}

.story_box {
	width: 100%;
	margin: 120px auto　0;
}

#story h4 {
	text-align: center;
	color: #FFF;
	font-size: 2.5rem;
}

#story .story { 
    margin-top: 100px;
}

#story .txt_L {
	color: #FFF;
	text-decoration: none;
}
#story .left {
	width: 48%;
	margin-right: 4%;
}
#story .right {
	width: 48%;
}


#sec05 .left img { width: 100%;}
#sec05 .left {
	width: 40%;
	margin-right: 5%;
}
#sec05 .right {
	width: 55%;
}

#sec05 h4 {
	color: #000;
}


#sec06 {
	background: linear-gradient(180deg, #FFF 0%, #FFF 15%, #191919 15%, #191919 100%);
	color: #FFF;
	padding-bottom: 100px;
}



#sec07 .inner_box {
	position: relative;
}
#sec07 .img_box { margin-bottom: 30px;}
#sec07 .left {
	width: 48%;
	margin-right: 4%;
}
#sec07 .right {
	width: 48%;
}
#sec07 h4 { 
    color: #000;
	font-size: 1.6rem;
	text-align-last: justify;
	width: 80%;
}
#sec07 h4 span { font-size: 1.2rem;}

#sec07 .txt_L,
#sec07 .txt_L a {
	color: #000;
	text-decoration: none;
	font-size: 1.8rem;
	font-family: 'Gilda Display', serif;
}


/****** CV BTN  ******/

.cv_box {
	text-align: center;
}

.cv_box a {
	width: 600px;
	color: #FFF;
	display: block;
	background: rgba(159,36,54,1.00) url("../images/icon_arrow.png") no-repeat right bottom;
	padding: 5px 0;
	margin: auto;
	font-size: 1.4rem;
}
.cv_box a:hover {
	background: #692927 ;
}


.cv {
	width: 130px;
	height: 120px;
	text-align: center;
	background: rgba(159,36,54,1.00) url("../images/icon_arrow.png") no-repeat center bottom;
	color: #FFF;
	font-size: 1.2rem;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 9999;
}
.cv a {
	width: 100%;
	height: 100%;
	padding: 15px 0;
	display: block;
}
.cv a:hover {
	background: #692927;
}


/****** LOOP WRAP ANIMATION *****/

.loop_wrap1,
.loop_wrap2{
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    overflow: hidden;
    z-index: 9980;
}

.loop_wrap1 img,
.loop_wrap2 img{
  width: auto;
    line-height: 0;
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

@keyframes loop3 {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes loop4 {
  0% {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(0);
  }
}

.loop_wrap1 img:first-child{
  animation: loop 100s -50s linear infinite;
}

.loop_wrap1 img:last-child{
  animation: loop2 100s linear infinite;
}

.loop_wrap2 img:first-child{
  animation: loop3 100s -50s linear infinite;
}

.loop_wrap2 img:last-child{
  animation: loop4 100s linear infinite;
}



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

img { width: 100%; }
    
.pc_disp {display: none;}
.sp_disp {display: block;}
.pc_img {display: none;}
.sp_img {display: inline-block;}
    
    
/***********   COMMON settng ***********/
body {
    font-size: 15px;
}
	
section {
	width: 90%;
	margin: 80px auto;
}

.inner_box {
	width: 90%;
	margin: auto;
}

/***********   TEXT SETTING ***********/

.txt_box {
	margin:auto;
}
	
p {	
	margin-bottom: 0.8rem;
}
.txt_L {
	font-size: 1.1rem;
	text-decoration: underline;
	margin: 30px auto;
	line-height: 2;
}

.txt_center { text-align: center;}

h2 { 
	font-size: 1.5rem;
	margin-bottom: 1.2rem;
	text-align: left;
}

h3 {
	font-size: 2.0rem;
}
/*
.slide_container h4 {
    font-size: 0.7rem;
}
.slide_container p {
    font-size: 0.5rem;
}
    
/***********   CONTENTS SETTING ***********/

header {
	background: url("../images/img_kv.jpg") no-repeat top center;
	background-size: 120%;
	width: 100vw;
	min-height: 36vh;
	margin-bottom: 20px;
}
	
.intro {
	text-align: justify;
	text-justify:auto;
}	
.intro h2 {
	text-align: center;
}
	
h1 { padding: 5% ;}
h1 img { 
	width: 30%;
}


#sec01 .left {
	width: 100%;
	margin-right: 0%;
}
#sec01 .right {
	width: 100%;
}

#sec02 .left {
	width: 100%;
	margin-right: 0%;
	padding-top: 0px;
}
#sec02 .left img {
	width: 100%;
}
#sec02 .right {
	width: 100%;
}
    
    
.slideB	h4 {
	font-size: 1.2rem;
	line-height: 1.8;
	width: 95%;
	margin: 0 auto 1rem auto;
}
.slideB p {
	width: 95%;
	margin: auto;
}

.slideC_sp li {
	border: 1px #CCC solid;
	text-align: center;
	padding: 20px;
	max-width: 255px;
	margin: auto;
}

.slideC_sp .txt_bottom {
	left: 30px;
}
	
.slideC h3 {
	font-size: 1.8rem;
}
.slideC p {
	margin-bottom: auto;
}

.slideC_sp .caption {
	text-align: justify;
	width: 90%;
	margin: auto;
}

.slideC_sp .txt_M {
	font-size: 1.6rem;
	font-family: 'Gilda Display', serif;
}
.slideC_sp .txt_S {
	font-size: 0.8rem;
	text-align: justify;
}
.slideC_sp .txt_bottom {
	position: absolute;
	bottom: 15px;
	left: 10%;
}


#story {
	background: url("../images/bg_story.jpg") no-repeat top;
	background-attachment: fixed;
	background-size: cover;
}
		
#story .contents_box {
	width: 80%;
	margin: auto;
}	
	
#story .story_box {
	margin: 80px auto　0;
}	
	
#story .left {
	width: 100%;
	margin-right: 0%;
	margin-top: 80px;
}
#story .right {
	width: 100%;
	
}
	
#sec05 .left {
	width: 80%;
	margin: 0 10% 30px;
}
#sec05 .left img { width: 100%;}
#sec05 .right {
	width: 100%;
}	
	
#sec07 .inner_box {
	position: relative;
	margin-bottom: 60px;
}
#sec07 .img_box { margin-bottom: auto;}
#sec07 .left {
	width: 100%;
	margin-right: 0%;
}
#sec07 .right {
	width: 100%;
}
#sec07 h4 { 
	color: #000;
	text-align: left;
	text-align-last:left;
	width: 100%;
	font-size: 1.2rem;
}
#sec07 .txt_L,
#sec07 .txt_L a {
	color: #000;
	text-decoration: none;
	font-size: 1.8rem;
	font-family: 'Gilda Display', serif;
}
#sec07 h4 span { font-size: 1.0rem;}
	
	
	
	
/****** CV BTN  ******/
	
.cv_box {
	text-align: left;
	width: 90%;
}
	
.cv_box h2 { text-align: center;}	

.cv_box a {
	width: 100%;
	padding: 5px 0;
	text-align: center;
	font-size: 1.0rem;
	margin: 30px auto;
}	
	
.cv {
	width: 100%;
	height: 40px;
	text-align: center;
	background: rgba(159,36,54,1.00) url("../images/icon_arrow.png") no-repeat right bottom;
	color: #FFF;
	font-size: 1.0rem;
	position: fixed;
	bottom: 0;
	right: 0;
}
.cv a {
	width: 100%;
	height: 100%;
	padding: 5px 0;
	display: block;
}
	


}


/****** FADEIN ACTION ******/

.fadein {
  /* 最初は非表示 */
  transform: translate3d(-50px,-100px,0);
  opacity: 0;
  visibility: hidden;
  transition: transform 1s, opacity 1s, visibility 1s;
}
/* フェードイン時に入るクラス */
.is-fadein {
  transform: translate3d(0,0,0);
  opacity: 1;
  visibility: visible;
}