@charset "utf-8";


/* responsive Start */
/*===================================================================== */


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

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


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

#head {
    width: 100%;
    height: 70px;
    min-width: 100%;
    padding: 15px 0 0 0;
    background-color:#FFF;
    z-index: 100;
    position: fixed;
    top: 0;
}
    
#head h1{width: 50px; margin: 0 auto;}
#head h1 img{width:100%;}

#head .gobalmenu{display: none;}    

.sidebar {width: 32px; height: 100%; background-color: #000; position: fixed; top: 0; left: 0; z-index: 101;}
.sidebar .insta{position: fixed; top: 0; left: 0; font-size:17px; z-index: 100;}
.sidebar .insta a{
    width: 32px;
    height: 32px;
    color: #FFF;
    background-color: #E03134;
}
.sidebar .insta a:hover{opacity: 1; }
.sidebar .h_name{width: 120px; font-size: 10px; color: #FFF; transform:rotate(270deg); position: fixed; left: -46px; top: 90px;}

    
/* TOPページ用 */
#head_top {
    display: inherit;
    width: 100%;
    height: auto;
    min-width: 100%;
    padding: 15px 0 5px 0;
    background-color:none;
    z-index: 100;
    position: fixed;
    top: 0;
}
    
#head_top h1{display: none; /*width: 50px; margin: 0 auto;*/}
/*#head_top h1 img{width:100%;}*/

    
.contents-header .gobalmenu{ display: none;}

.sidebar_index {width: 32px; height: 100%; background-color: #000; position: fixed; top: 0; left: 0; z-index:101;}
.sidebar_index .insta{position: fixed; top: 0; left: 0; font-size:17px; z-index: 100;}
.sidebar_index .insta a{
    width: 32px;
    height: 32px;
    color: #FFF;
    background-color: #E03134;
}
.sidebar_index .insta a:hover{opacity:1;}
.sidebar_index .h_name{width: 120px; font-size: 10px; color: #FFF; transform:rotate(270deg); position: absolute; left: -46px; top: 90px;}


/* サウンドコントロール */
.sound_play{
    position: fixed; top:28px; left:60px; 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: 120px;
      height: 1px;
      margin: -16px 0 0 82px;
      border-radius:0;
      background: linear-gradient(#000, #000) no-repeat #ECECEC;
    }
    
    
/*=====================================================================
00. ハンバーガーメニュー
======================================================================= */

.menublock{
    display: inherit;
	position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9999;
    }
    
.menuarea{ width:56px; height: 100%; position: absolute; top: 35px; right:6%; z-index: 99999; text-align: center; display: block;}
.menuarea a{ width:40px; height: 20px; }
/*.menuarea a:hover .menu-line span{opacity: 0.6;}*/

/* ハンバーガーメニュー*/
.menu-line,
.menu-line span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-line {
  position: relative;
	z-index: 2;
  top:0;
  width: 56px;
  height:20px;
}
.menu-line span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #102b47;

}
.menu-line span:nth-of-type(1) {
  top: 0;
}
.menu-line span:nth-of-type(2) {
  top: 10px;
}


/* アニメーション*/
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(5px) rotate(-20deg);
  transform: translateY(5px) rotate(-20deg);
}
.menu-trigger.active span:nth-of-type(2) {
    -webkit-transform: translateY(-5px) rotate(20deg);
  transform: translateY(-5px) rotate(20deg);
}



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

#navigation{
  position: fixed;
  display: none;
  width: 100%;
    min-width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9998;
}

    
#navigation .navigation_inner{
  width: 100%;
  height: 100%;
    position: relative;
    margin: 0 auto 0 auto;
    background-color: #FFF;
    overflow: scroll;
}

    
#navigation .navigation_inner .head{
    height: 70px;
    border-bottom: 1px solid #E2E2E2;
    position: relative;
    padding:15px 0 0 0;
    margin: 0;
}

#navigation .navigation_inner .head h1{
    width: 50px; margin: 0 auto;
}
    
#navigation .navigation_inner .head h1 img{width: 100%;}
#navigation .navigation_inner .head h1 a{opacity:1;}
#navigation .navigation_inner .head h1 a:hover{opacity: 1;}
    

#navigation .sp_menuarea{
  width: 100%;
  margin-top: 0;
    padding: 0;
    position: relative;
}

#navigation .sp_menuarea .menu{margin: 0; padding: 0;}
#navigation .sp_menuarea .menu ul{width: 100%; margin: 0; padding: 0;}
#navigation .sp_menuarea .menu ul li{
    width: 100%;
    background-color: #000;
    border-bottom: 1px solid #333;
    position: relative; 
    text-align: center;
    }

#navigation .sp_menuarea .menu ul li a{
    display: block; 
    padding: 5% 0 4% 0; 
    font-size: 24px;
    color: #FFF;
    font-weight: 700; 
    text-decoration: none; 
    line-height: 100%; 
    position: relative;
    background-image:url("../images/arrow02_white.png");
    background-repeat: no-repeat;
    background-size: 18px auto;
    background-position: 30px 35px;
    }

#navigation .sp_menuarea .menu.toppage ul li a{
    padding: 5% 0 7% 0; 
    }
    
    #navigation .sp_menuarea .menu ul li a::after{
        content: "";
        position: absolute;
        z-index: 100;
        top: 0; left: 0;
        width: 10px;
        height: 100%;
        background-color: #E03134;
    }
    
#navigation .sp_menuarea .menu ul li a p{font-size: 12px; font-weight: 400; line-height: 100%; margin-top:6px;}

#navigation .sp_menuarea .menu ul li a:hover{background-color: #000;}


#navigation .footarea{width:100%; position: absolute; bottom: 6%; left: 0;; text-align: center;}


#navigation .footarea .insta {width: 60px; margin: 0 auto;}
#navigation .footarea .insta a{
    width: 54px;
    height: 54px;
    text-decoration: none;
    font-size:22px;
    letter-spacing: .04em;
    color: #FFF; 
    background-color: #E03134; 
    border-radius: 30px;
    transition: all 0.2s ease;
    
    /*　box要素縦中央 */
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */
}
#navigation .footarea .contact a:hover{background-color: #0e6389; transition: all 0.1s ease;}

    
    
#navigation .copyright{
    width: 100%;
    text-align: center;
    font-size: 10px;
    color: #000;
    letter-spacing: .04em;
    margin: 20px auto 0 auto;
}

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


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


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

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

#wrap .article{
    width: calc(100% - 94px);
    margin:110px 0 0 64px;
}

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

    
#wrap .article .page_ttl .btn_news{position: relative; left: 50%; bottom: 0; width: 50%;}

#wrap .article .page_ttl02{margin: 30px 0 40px 0; position: relative;}
#wrap .article .page_ttl02 span{font-size: 22px; line-height: 100%;}
#wrap .article .page_ttl02 p{font-size: 12px; line-height: 100%;}
#wrap .article .page_ttl02 .btn_news{position: absolute; right: 0; bottom: 0; width: 50%;}


#wrap .newsarea{width: 100%; margin-bottom: 0;}
#wrap .newsblock{width: 100%; float: none; margin-bottom: 40px;}
#wrap .newsblock:nth-child(odd){margin-right: 0;}
#wrap .newsblock .newsimage{width: 100%; height:100% ; overflow: hidden; margin-bottom: 20px;}
#wrap .newsblock .newsimage img{width: 100%; height: auto;}
#wrap .newsblock .date{font-size: 11px; margin-bottom: 15px; 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: 18; border-bottom: 1px solid #FFF; padding-bottom: 20px; line-height: 180%; letter-spacing: .04em;}
#wrap .article_body{font-size: 15px; line-height: 210%; letter-spacing: .04em; margin-top:30px; border-bottom: 1px solid #FFF; padding-bottom: 20px;}
#wrap .article_body img{max-width: 100%;}

#wrap .article_body .ar_image{width:70%; margin: 0 auto 20px auto; }


.btnarea{width: 50%; margin:20px 0 0 50%; }

.btn_news a{
    display: block;
    width: 100%;
    font-size: 12px;
    letter-spacing: .08em;
    color: #000;
    text-decoration: none;
    position: relative;
    padding-bottom:15px;
    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: 20px;
    font-size: 14px;
}
.xo-event-calendar td{
    height: 30px;
}

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

.form_caption{font-size: 14px; letter-spacing: .04em; margin-bottom: 40px; line-height: 200%;}

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

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

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

.formborder{width: 100%; margin: 0; padding: 0; float: none;}
.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: 100%;}

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

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


.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: 42px;
    border-radius: 31px;
    margin: 30px auto 0 auto;
    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: 0; margin-bottom: 20px;}
.formkakunin .formborder .left,.formkakunin .formborder .right{font-size:15px; line-height: 180%; }
.formkakunin .btn_submit{margin-top:30px;}

.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: 100%;
    margin:0;
    padding: 40px 0 50px 0;
    position: relative;
    background-color: #FFF;
    z-index: 110;
}

footer .left{
    float: none;
    width: calc(100% - 32px);
    padding-left: 32px;
}

footer .logoarea{display: flex;}
footer .logoarea h2{width:40px; margin-right:20px;}
footer .logoarea h2 img{width:100%;}
footer .logoarea h2 a{width:40px; margin-right:20px;}
footer .logoarea .outline{font-size:10px; line-height: 200%; letter-spacing: .04em;}


footer .left .gobalmenu{display: none;}

footer .right{display: none;}
footer .right_sp{display: inherit; float: none; background-color: aqua; width: 100%; position: relative; }

footer .right_sp .pagetop{width: 7px; position:absolute; bottom: 0; right:30px; }
footer .right_sp .pagetop img{width: 100%;}

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


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

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

.notfound_btn{width: 80%; margin: 0 auto  120px auto;}

.notfound_btn  a{
	 width: 100%; 
	padding: 4px 0 4px 0;
    font-size: 13px;
	margin-right: 20px;
	border-radius: 30px;
	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;}


    
/* responsive End */
/*===================================================================== */
}