@charset "utf-8";


/* Chapman weight 500 700 900*/

.en_black {
font-family: chapman, sans-serif;
font-weight: 900;
font-style: normal;
}
.en_bold {
font-family: chapman, sans-serif;
font-weight: 700;
font-style: normal;
}
.en_medi {
font-family: chapman, sans-serif;
font-weight: 500;
font-style: normal;
}

/* Sirenne*/

.en_mvb_r{
font-family: sirenne-eighteen-mvb, serif;
font-weight: 400;
font-style: normal;
}

.en_mvb_b{
font-family: sirenne-text-mvb, serif;
font-weight: 700;
font-style: normal;
}


/* Noto serif*/

.jp_serif{
font-family: 'Noto Serif JP', serif;
font-weight: 600;
}


.spnone{display: none;}
.pcnone{display: inherit;}

/*=====================================================================
00. # Navigation
======================================================================= */

#head {
    width: calc(100% - 140px);
    background-color:#FFF;
    margin: 0 auto;
    padding: 50px 0 40px 0;
    min-width: 980px;
}

#head h1{width: 94px; margin: 0 auto;}
#head h1 img{width:100%;}

#head .gobalmenu{width: 100%; margin-top: 20px;}
#head .gobalmenu ul{margin: 0; padding: 0; text-align: center;}

#head .gobalmenu li{display: inline-block; margin: 0 30px;}
#head .gobalmenu li a{text-decoration: none; font-size: 18px; position: relative; letter-spacing: .03em;}

#head .gobalmenu li a::after,.contents-header .gobalmenu li a::after{
  position: absolute;
  bottom: -6px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #000;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .2s;
}
#head .gobalmenu li a:hover::after,.contents-header .gobalmenu li a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

.sidebar {width: 70px; height: 100%; background-color: #000; position: absolute; top: 0; left: 0;}
.sidebar .insta{position: fixed; top: 0; left: 0; font-size: 21px; z-index: 100;}
.sidebar .insta a{
    width: 70px;
    height: 70px;
    color: #FFF;
    background-color: #E03134;
    transition: all 0.3s ease;
    text-decoration: none;

/*　box要素縦中央 */
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向右揃え（Safari用） */
 justify-content: center; /* 横方向右揃え */
}
.sidebar .insta a:hover{opacity: 0.8; transition: all 0.15s ease;}
.sidebar .h_name{width: 140px; font-size: 11px; color: #FFF; transform:rotate(270deg); position: fixed; left: -36px; top: 140px;}


/* TOPページ用 */
#head_top {
    display: none;
}

.contents-header .gobalmenu{ margin: 53px 0 0 140px;}
.contents-header .gobalmenu ul{margin: 0; padding: 0;}
.contents-header .gobalmenu li{display: inline-block; margin: 0 60px 0 0;}
.contents-header .gobalmenu li a{text-decoration: none; font-size: 16px; position: relative; letter-spacing: .03em;}

.sidebar_index {width: 70px; height: 100%; background-color: #000; position: fixed; top: 0; left: 0; z-index:100;}
.sidebar_index .insta{position: absolute; top: 0; left: 0; font-size: 21px; z-index: 100;}
.sidebar_index .insta a{
    width: 70px;
    height: 70px;
    color: #FFF;
    background-color: #E03134;
    transition: all 0.3s ease;
    text-decoration: none;

/*　box要素縦中央 */
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向右揃え（Safari用） */
 justify-content: center; /* 横方向右揃え */
}
.sidebar_index .insta a:hover{opacity: 0.8; transition: all 0.15s ease;}
.sidebar_index .h_name{width: 140px; font-size: 11px; color: #FFF; transform:rotate(270deg); position: absolute; left: -36px; top: 140px;}


/* サウンドコントロール */
.sound_play{position: fixed; top:50px; right:50px; z-index: 99;}

    audio {
      display: none
    }
    #play, #stop {
      display: inline-block;
      width: 28px;
      height: 28px;
        line-height: 28px;
      text-align: center;
        font-size: 10px;
      border-radius: 50%;
      background: #000;
      cursor: pointer;
        color: #FFF;
    }
    #play:hover, #stop:hover {
      background: #E03134;
    }

    #play {margin: 0 12px 0 0;}
    #stop {margin: 0 0 0 0; display: none;}

    #time {
        display: none;
    }

    #seekbar {
        display: none;
        
        
      width: 140px;
      height: 1px;
      margin: -16px 0 0 82px;
      border-radius:0;
      background: linear-gradient(#000, #000) no-repeat #ECECEC;
    }




/*=====================================================================
00. ドロワーメニュー
======================================================================= */

#navigation{display: none;}
.menublock{display: none;}


/*=====================================================================
01. Index
======================================================================= */

/*
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}
.outer-wrapper{
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    scrollbar-width: none;
    -ms-overflow-style:none;
}
::-webkit-scrollbar{
    display: none;
}
.wrapper{
    display: flex;
    width: 400vw;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
}
.slide{
    width: 100vw;
    height: 100vh;
}
.one{
    background-color: aqua;;
}
.two{
    background-color: #DDD;
}
.three{
    background-color: aqua;;
    background-size: cover;
}
.four{
    background-color: #DDD;
    /*background-size: cover;
}


/*
.index_wrap{
  overflow: hidden;
}
.beside_area{
  display: flex;
}

.beside_area section{}

.beside_sec{
  height: 100vh;
}
.pn11{ background: #346c9c; }
.pn12{ background: #b1c3cb; }
.pn13{ background: #595757; }
*/





/*=====================================================================
02. layout
======================================================================= */


#wrap {
  overflow: hidden;
  position: relative;
  width: 100%;
  min-width: 980px;
  margin: 0;
  background-color: #F4F4F4;
}



/*=====================================================================
03. Article
======================================================================= */

#wrap .article{
    width: 740px;
    margin: 0 auto 0 auto;
}

#wrap .article .page_ttl{margin: 80px 0 70px 0; position: relative;}
#wrap .article .page_ttl span{font-size: 54px; line-height: 100%;}
#wrap .article .page_ttl p{font-size: 13px; line-height: 100%;}

#wrap .article .page_ttl .btn_news{position: absolute; right: 0; bottom: 0; width: 180px;}

#wrap .article .page_ttl02{margin: 100px 0 60px 0; position: relative;}
#wrap .article .page_ttl02 span{font-size: 26px; line-height: 100%;}
#wrap .article .page_ttl02 p{font-size: 13px; line-height: 100%;}
#wrap .article .page_ttl02 .btn_news{position: absolute; right: 0; bottom: 0; width: 150px;}


#wrap .newsarea{width: 100%; margin-bottom: 40px;}
#wrap .newsblock{width: 340px; float: left; margin-bottom: 60px;}
#wrap .newsblock:nth-child(odd){margin-right: 60px;}
#wrap .newsblock .newsimage{width: 340px; height: 207px; overflow: hidden; margin-bottom: 38px;}
#wrap .newsblock .newsimage img{width: 100%; height: auto;}
#wrap .newsblock .date{font-size: 11px; margin-bottom: 16px; letter-spacing:.05em;}
#wrap .newsblock .news_ttl{font-size: 16px; margin-bottom:10px; line-height: 180%; letter-spacing: .04em;}
#wrap .newsblock .news_body{font-size: 13px; font-weight: 400; line-height: 200%; letter-spacing: .04em; font-feature-settings: "palt";}

#wrap .news_article{}
#wrap .article_date{font-size: 11px; margin-bottom: 10px;}
#wrap .article_title{font-size: 20px; border-bottom: 1px solid #FFF; padding-bottom: 30px; line-height: 180%; letter-spacing: .04em;}
#wrap .article_body{font-size: 13px; line-height: 220%; letter-spacing: .04em; margin-top:40px; border-bottom: 1px solid #FFF; padding-bottom: 30px;}
#wrap .article_body img{max-width: 100%;}

#wrap .article_body .ar_image{width:440px; margin: 0 auto 40px auto; }


.btnarea{width: 120px; margin:20px 0 0 220px; }

.btn_news a{
    display: block;
    width: 100%;
    font-size: 12px;
    letter-spacing: .08em;
    color: #000;
    text-decoration: none;
    position: relative;
    padding-bottom: 20px;
    background-image: url("../images/arrow02.png");
    background-repeat: no-repeat;
    background-position: top 7px right 0;
    background-size: 15px auto;
}


.btn_news a::before{
    content: '';
    width: 100%;
    height: 1px;
    background: #9B9B9B;
    position: absolute;
    bottom: 0;
    left: 0px;
}

.btn_news a::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 1px;
    bottom: 0;
    left: 0;
  background: #000;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .35s ease;
}
.btn_news a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}


/*=====================================================================
05. Calendar
======================================================================= */
.xo-event-calendar{
    margin:0 0 40px 0;
font-family: chapman, serif!important;
font-weight: 600!important;
}
.xo-event-calendar th{
    height: 30px;
    font-size: 14px;
}
.xo-event-calendar td{
    height: 40px;
}

/* カレンダ内のリンクスタイル */
.xo-event-calendar a{color: #FFF!important;}
.xo-event-calendar a .month-event-title{color: #FFF!important; padding: 2px 4px!important; font-family: 'Noto Sans JP'!important; font-weight: normal;}


/* カレンダ下の休日設定のテキスト */
.holiday-titles{margin-top: 20px; font-size: 14px; letter-spacing: .04em;}
.holiday-titles .holiday-title{display: inline-block; margin-right: 20px!important;}

/* 詳細に表示されるイベントメタデータ */
.xo-event-meta{display: none;}

/* 詳細の本文スタイル */
.single-xo_event .article_body{font-size: 14px!important; margin-bottom: 80px!important;}


/*=====================================================================
06. Contact
======================================================================= */

.form_caption{font-size: 14px; letter-spacing: .04em; margin-bottom: 50px;}

.formarea{width:100%; margin:0 0 30px 0; }

.formname {
	width:30%!important;
	margin:0 0 0 0;
	line-height:140%;
	padding:0 0 0 0;
    float: left;
    vertical-align:top;
}

.formname .en_black{font-size:24px;}
.formname .jp_serif{font-size: 11px;}

.formborder{width: 70%; margin: 0; padding: 0; float: left;}
.formborder .left{width: 45%; float: left; margin-right: 5%;}
.formborder .right{width: 45%; float: left; margin-left: 5%;}

.formborder .left input,.formborder .right input{width: calc(100% - 40px); padding: 20px; margin-bottom: 0; border: none;}
.formborder input {
	width: calc(100% - 40px);
	padding: 20px;
	font-size: 100%;
    border: none;
}

.formborder textarea{ width:calc(100% - 40px); padding: 20px; border: none; font-size: 120%;}

.btn_submit {
	width:70%;
	margin: 60px 0 0 30% ;
}

.btn_submit input {
	width:100%;
	text-align: -9999px;
	height:80px;
    background-color: #E03134;
    color: #FFF;
    font-size: 18px;
    letter-spacing: .03em;
    font-weight: bold;
	border: none;
	cursor: pointer;
    transition: all 0.35s cubic-bezier(0.215, 0.61, 0.325, 1) 0s;
}


.btn_submit input:hover {
  background: #5B5B5B;
    color: #FFF;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.325, 1) 0s;
}

.btn02 input{
    width: 70%;
    height: 62px;
    border-radius: 31px;
    margin: 30px 0 0 30%;
    font-size: 15px;
    font-family: source-han-sans-japanese, sans-serif;
    font-weight:700;
    color: #FFF;
    background-color: #9B9B9B;
    text-decoration: none;
    line-height:0;
    outline: none !important;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.215, 0.61, 0.325, 1) 0s;
    position: relative;
    z-index:1;
    border: none;

/*　box要素縦中央 */
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向右揃え（Safari用） */
 justify-content: center; /* 横方向右揃え */
}
/*
.btn01 a img{width: 49px; margin: -5px 0 0 85px;}
*/

.btn02 input:hover {
  background: #777777;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.325, 1) 0s;
}


/* 確認画面用スタイル */

.formkakunin .formborder{font-weight: normal; padding-top: 16px;}
.formkakunin .formborder .left,.formkakunin .formborder .right{font-size:15px; line-height: 180%; }
.formkakunin .btn_submit{margin-top:40px;}

.kakuninbody{font-size: 15px; line-height: 180%; letter-spacing: .04em; margin-bottom: 50px;}

.thankstitle{text-align: center; font-size:18px;  line-height: 200%; border-bottom: 1px solid #FFF; padding-bottom: 30px;}
.thanksbody{text-align: center; font-size: 14px; line-height:220%; margin: 30px 0 60px 0;}


/*=====================================================================
07. Footer
======================================================================= */


footer{
    width: 100%; 
    min-width: 980px;
    margin:0;
    padding: 100px 0 100px 0;
    /*box-sizing: border-box;*/
    position: relative;
}

footer .left{
    float: left;
    width: calc(80% - 70px);
    padding-left: 70px;
}

footer .logoarea{display: flex;}
footer .logoarea h2{width:58px; margin-right:30px;}
footer .logoarea h2 img{width:100%;}
footer .logoarea h2 a{width:58px; margin-right:30px;}
footer .logoarea .outline{font-size:11px; line-height: 200%; letter-spacing: .04em;}
footer .logoarea .outline a{text-decoration: none; position: relative;}
footer .logoarea .outline a::after{
  position: absolute;
  bottom: -6px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #000;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .2s;
}
footer .logoarea .outline a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

footer .left .gobalmenu{margin: 60px 0 0 88px;}
footer .left .gobalmenu ul{margin: 0; padding: 0;}
footer .left .gobalmenu li{display: inline-block; margin: 0 50px 0 0; }
footer .left .gobalmenu li a{text-decoration: none; font-size: 15px; position: relative; letter-spacing: .03em; }
footer .left .gobalmenu li a::after{
  position: absolute;
  bottom: -6px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #000;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .2s;
}
footer .left .gobalmenu li a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}


footer .right{float: left; width: 20%; position: relative;}
footer .right_sp{display: none;}

footer .right .pagetop{width: 8px; position:absolute; bottom: 0; right:90px; }
footer .right .pagetop img{width: 100%;}

footer .copyright{
    width: 100%;
    font-size: 10px;
    color: #000000;
    letter-spacing: .04em;
    margin: 20px 0 0 88px;
}


/*=====================================================================
00. Animation
======================================================================= */

/* hover
------------------------------------------------------------------------ */
a.mo_fade{transition: all 0.3s ease;}
a.mo_fade:hover{opacity: 0.75; transition: all 0.15s ease;}

a.mo_fade2{transition: all 0.3s ease;}
a.mo_fade2:hover{opacity: 0.6; transition: all 0.15s ease;}

a.mo_fade3{transition: all 0.3s ease;}
a.mo_fade3:hover{opacity: 0.5; transition: all 0.15s ease;}


/* Newsサムネイル　hover拡大
------------------------------------------------------------------------ */

/* Hover Image */
a.hoverimg {
  display: block;
  transition: 0.4s ease-out;
}

a.hoverimg:hover {
  transform: scale(1.06) rotate(0.1deg);
  opacity: 0.6;
	transition: 0.2s ease-out;
}


/* スクロール時のトランジション
------------------------------------------------------------------------ */

.photo {
  overflow: hidden;
  position: relative;
}

.photo.in:before {
  animation: img-wrap 1.0s cubic-bezier(.4, 0, .2, 1) forwards;
	 animation-delay: 0.4s;
  background: #F4F4F4;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}



/* 404
------------------------------------------------------------------------ */

.notfoundttl {width: 100%; text-align: center; font-size: 13px; margin:100px 0 40px;}
.notfoundttl h2{font-size: 28px; margin-bottom: 10px; color: #333; }

.notfound_btn{width: 200px; margin: 0 auto 100px auto;}

.notfound_btn  a{
	 width: 100%; 
	height: 48px;
    font-size: 13px;
	border-radius: 24px;
	background-color: #333; 
	text-align: center; text-decoration: none;color: #FFF; 
	transition: all 0.3s ease;
/*　box要素縦中央 */
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */

}

.notfound_btn  a:hover{background-color: #7C7C7C; color: #FFF; transition: all 0.1s ease;}