@charset "utf-8";
@import url("header.css");
@import url("footer.css");


/**********************************************/
/*共通*/
/**********************************************/
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

* html body {
	overflow: hidden;
    scroll-behavior: smooth;
}

html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
	margin:0;
	padding:0;
    font-size: 1.6rem; /*16px相当*/
    line-height: 1.6;
    font-family: 'Kiwi Maru','Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
    font-weight: 300;
    overflow-x: hidden;
}


a {
    color: #3D3D3D;
    text-decoration: none;
}

img {
    border-width:0;
    max-width: 100%;
    height: auto;
}

section{
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

/**********************************************/
/*見出し*/
/**********************************************/
h1,h2,h3,h4,h5,h6 {
    margin: 0;
    line-height: 140%;
}

h1 {
    margin-top: 0;
    font-size:3.2rem;  /*16px×2相当*/
}
h2 {
    font-size: 2.8rem;
}
h3 {
    font-size: 2.6rem;
}
h4 {
    font-size: 2.4rem;
}
h5 {
    font-size: 2.0rem;
}
h6 {
    font-size: 1.8rem;
}


.h1-header {
    margin-top: 0;
    /*font-size: 5.0rem; /*50px相当*/
    font-size: 3.0rem; 
}
.h2-header {
    /*font-size: 4.0rem; /*40px相当*/
    font-size: 3.5rem; 
}
.h3-header {
    /*font-size: 3.2rem; /*32px相当*/
    font-size: 2.5rem; 
}
.h4-header {
    font-size: 1.6rem; /*16px相当*/
}
.h5-header {
    font-size: 1.6rem;
}
.h6-header {
    font-size: 1.6rem;
}


/**********************************************/
/*コンテンツ*/
/**********************************************/
main {
    margin:0;
}

.contents {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; 
}


/*---------------------------*/
/*表紙部分*/
/*---------------------------*/
.theme {
    width: 100%;
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    height: 85vh;
}

/*写真枠*/
.theme-img {
    width:calc(8.333% * 9.5);
    position: relative;
    height: 85vh;
}

/*メニュー枠*/
.theme-sidebar {
    width:calc(8.333% * 2.5);
    padding-top: 90px;
}


/*メイン写真*/
.theme-img .photo {
    width: 100%;
    height: 85vh;
    border-bottom-right-radius: 50px;
    object-fit: cover;
}
/*メイン写真*/
.theme-img .video {
    width: 100%;
    height: 85vh;
    border-bottom-right-radius: 50px;
    object-fit: cover;
}

/*メッセージ*/
.theme-img #message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}
h1.message-txt {
    color:initial;
    margin:initial;
    padding:initial;
    border:initial;
    background:initial;
    font-weight: normal;
    text-align: center;
}
.message-txt {
	font-size: 3.2rem;
    letter-spacing: 0.7em;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-align: center;
}
.message-txt span {
    background:rgba(0,0,0,0.8);
    color: #fff;
    /*padding: 0;*/
    margin-left: 20px;
    margin-right: 20px;
    display: block;
    /*height: 80%;*/
    height: 110%;
    padding:10px 0;
    
    
}
.message-txt span:nth-child(1) {}
.message-txt span:nth-child(2) {
    margin-top: 100px;
}

/*ロゴ 800px用*/
.message-logo {
    display: none;
}


/*メニュー内枠*/
.theme-sidebar-inner {
    margin: 0 60px;
    text-align: center;
}

/*ロゴ*/
h1.theme-menu-logo {
    color:initial;
    margin:initial;
    padding:initial;
    border:initial;
    background:initial;
    font-weight: normal;
}
.theme-menu-logo img {
    max-width: 100px;
    margin-bottom: 50px;
}


/*メニュー*/
.theme-menu-nav ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 90%;
}
.theme-menu-nav li {
    margin: 20px 0;
}

.theme-menu-nav ul a {
  display: inline-block;
}

.theme-menu-nav ul a::after {
  content: "";
  display: block;
  width: 0;
  transition: width 0.3s;
  border-bottom: 1px solid #D67476;
}

.theme-menu-nav ul a:hover::after {
  width: 100%;
}


/*---------------------------*/
/*セクションの見出し*/
/*---------------------------*/
.header-ttl {
    margin-bottom: 40px;
}
.header-ttl .h2-header {
    font-size: 3.0rem;
    margin: 10px 0;
}
.header-ttl .sub-header {
    font-size: 1.6rem;
}
.header-ttl .read-header {
    font-size: 2.5rem;
    margin-top: 30px;
}


/*---------------------------*/
/*画像拡大用*/
/*---------------------------*/
.imgWrap {
	overflow: hidden;
}
.imgWrap img {
	display: block;
	transition-duration: 0.3s;
}
.imgWrap img:hover {
	transform: scale(1.1);
	transition-duration: 0.5s;
	opacity: 0.8;
}



/*---------------------------*/
/*お問い合わせ*/
/*---------------------------*/
#contact {
    padding: 100px 0 30px;
    text-align: center;    
}

/*内枠*/
#contact .contents {
    background-image:  url("../images/illust/kumo.png"),url("../images/illust/bird.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left top, 96% bottom;
    background-size: 20%, 15%;
}

#contact .err{
    text-align: left;    
    color: crimson;
}
/*お問い合わせボタン*/
.btn {
    margin: 60px 0 20px;
}
.btn-contact {
    width: 100%;
    max-width: 300px;
    padding: 10px;
    border-radius: 50px;
    background-color: #707070;
    color:#fff;
    text-align: center;
    display: inline-block;
}


/*---------------------------*/
/*アコーディオンメニュー*/
/*---------------------------*/
.acmenu {
    margin: 0;
    padding:0;
}
.acmenu dt {
  	cursor:pointer;
}
.acmenu dd {
	display:none;
	margin:0;
}
.acmenu dd.active {
    display: block;
}


/*＋-ボタン*/
.acmenu dt.plus {
	background:url("../images/icon-down.png") no-repeat right center;
	background-size: 24px;
}
.acmenu dt.plus-on {
	background:url("../images/icon-up.png") no-repeat right center;
	background-size: 24px;
}




/****************************/
/*レスポンシブ*/
/****************************/
@media screen and (max-width: 1240px) {
}

@media screen and (max-width: 980px) {
    .theme-img {
        width:calc(8.333% * 9);
    }
    .theme-sidebar {
        width:calc(8.333% * 3);
    }
}

@media screen and (max-width: 800px) {
    h1 {
        font-size:2.6rem;
    }
    h2 {
        font-size: 2.4rem;
    }
    h3 {
        font-size: 2.2rem;
    }
    h4 {
        font-size: 2.0rem;
    }
    h5 {
        font-size: 1.8rem;
    }
    h6 {
        font-size: 1.6rem;
    }    
    
    .h1-header {
        font-size: 3.2rem;
    }
    .h2-header {
        font-size: 3.0rem;
    }
    .h3-header {
        font-size: 2.3rem;
    }
    .h4-header {
        font-size: 1.6rem;
    }
    .h5-header {
        font-size: 1.6rem;
    }
    .h6-header {
        font-size: 1.6rem;
    }

    .header-ttl {
        margin-bottom: 40px;
    }
    .header-ttl .h2-header {
        font-size: 2.5rem;
        margin: 10px 0;
    }
    .header-ttl .sub-header {
        font-size: 1.2rem;
    }
    .header-ttl .read-header {
        font-size: 1.8rem;
    }


    /*メイン*/
    .theme {
        height: 85vh;
    }
    .theme-img {
        width: 100%;
        height: 85vh;
    }
    .theme-img .photo {
        height: 85vh;
    }
    .theme-sidebar {
        width: 100%;
        display: none;
    }

    /*メッセージ*/
    h1.message-txt {
        font-size: 2.5rem;
        letter-spacing: 1.3rem;
        width: 100%;
    }
    
    .message-txt {
        font-size: 2.5rem;
        letter-spacing: 1.6rem;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .message-txt-inner {}
   
    .message-logo {
        display: block;
    }
    .message-logo img {
        display: block;
        max-width: 120px;
        margin: 0 auto 50px;
    }

    /*お問い合わせ*/
    #contact {
        padding: 50px 0 0; 
    }
    #contact .contents {
        background-image:none;
    }
    .btn {
        margin: 60px 0 20px;
    }
}

@media screen and (max-width: 540px) {
    .message-txt span {
    height: 80%;
}
}

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

    /*アニメーション*/

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/
/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
.fadeUpTrigger{
    opacity: 0;
}

/* ふわっと */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.fadeInTrigger{
    opacity: 0;
}
/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{
animation-delay: 0.2s;
}

.delay-time04{
animation-delay: 0.4s;
}

.delay-time06{
animation-delay: 0.6s;
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 


/*===========
*メイン写真
===========*/

/*メイン写真*/
.is-animated {
	animation-name:blurAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
}
 
@keyframes blurAnime {
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}
/*===========
*フルフル
===========*/
.furufuru {
	animation: purupuru_anim 1s infinite alternate;
}

.furufuru {
	animation: purupuru_anim 1.5s infinite;
}

@keyframes purupuru_anim {
	0% {	transform: translate(0, 0);}
	5% {	transform: translate(-5px, -0);}
	10% {	transform: translate(5px, 0);}
	15% {	transform: translate(-5px, -0);}
	20% {	transform: translate(5px, 0);}
	25% {	transform: translate(-5px, -0);}
	30% {	transform: translate(0, 0);}
	100% {	transform: translate(0, 0);}
}