@charset "UTF-8";

@import url("sp.css") screen and (max-width: 640px);
@import url("pc.css") print, screen and (min-width: 641px) ;


/* Base Theme ============================================================= */
/* Reset ------------------------------------------------------------------ */
html{ font-size: 100%; -webkit-text-size-adjust: none;}
*{ margin: 0; padding: 0; }

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

body{
font-family: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
font-feature-settings: "palt";
background: #fff;
color: #9b8037;
font-size: 16px;
line-height: 1.75;
word-wrap: break-word;
overflow-wrap: break-word;
}
h1,h2,h3,h4,h5,h6{ font-size: 100%; font-weight: normal; }
ol, ul{ list-style-type: none; }
table { border-spacing: 0; }
caption,th{ text-align: left; }
fieldset,img,abbr,acronym{ border: 0; }
img{ vertical-align: top; max-width: 100%; height: auto; }

a{ color: #7F899C; text-decoration: none; -webkit-appearance: none !important; appearance: none !important; }
a:hover{ color: #80acff; }
a img,:link img,:visited img{ border: none; }
a, a::before, a::after{ -webkit-transition: all .3s; transition: all .3s; }


body{
animation: fadeIn 1s ease 0s 1 normal;
-webkit-animation: fadeIn 1s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {opacity: 0} 100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0} 100% {opacity: 1}
}



/* Common Classes ---------------------------------------------------- */
.kome{ text-indent: -1em; padding-left: 1em; }
.red{ color: #e34014; }
.txt-right{ text-align: right; }
.txt-left{ text-align: left; }
.txt-center{ text-align: center; }
.strong{ font-weight: 700; }


.zoomin{
position: relative;
display: block;
}
.zoomin::before{
content: 'zoom';
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%; height:100%;
background: rgba( 155, 128, 55, .75);
color: #fff;
font-weight: 500;
opacity: 0;
}
.zoomin:hover::before{ opacity: 1; }


/* ================ リスト ================ */
.list-num li, .list-dot li, .list-arrow li{
position: relative;
}

.list-num{ counter-reset: list-num; }
.list-num > li{ padding-left: 2em; }
.list-num > li::before{
position: absolute;
top: .15em; left: 0;
content: counter(list-num);
counter-increment: list-num;
display: inline-block;
width: 1.5em; height: 1.5em;
background: #9b8037;
color: #fdf7dd;
border-radius: 50%;
font-size: 95%;
font-weight: 500;
text-align: center;
line-height: 1.5em;
}

.list-dot li{ padding-left: 1em; }
.list-dot > li::before{
content: '';
position: absolute;
top: .6em; left: 0;
width: 8px; height: 8px;
background: #9b8037;
border-radius: 50%;
}

.list-arrow li{
padding-left: 1em;
}
.list-arrow > li::before{
content: '';
position: absolute;
top: .75em; left: 0;
display: inline-block;
vertical-align: middle;
color: #7F899C;
line-height: 1;
width: .4em; height: .4em;
border: 0.125em solid currentColor;
border-left: 0;
border-bottom: 0;
box-sizing: border-box;
transform: translateX(-25%) rotate(45deg);
}
.list-arrow li:hover::before{
color: #80acff;
}

/* ================ ボタン ================ */
.btn-figure a{
display: inline-block;
color: #fff;
background: #7F899C;
line-height: 1;
padding: .25em .75em .35em .75em;
margin: 0 .25em;
border-radius: 2em;
font-size: 13px;
}
.btn-figure a:hover{
background: #80acff;
}

.btn a{
display: flex;
align-items: center;
justify-content: center;
background: #7F899C;
border: 3px solid #7F899C;
color: #fff;
padding: .5em;
border-radius: 8px;
}
.btn a:hover{
background: #fff;
color: #7F899C;
}


/* ================ アイコン ================ */
.arrow{
display: inline-block;
vertical-align: middle;
line-height: 1;
position: relative;
width: .5em; height: .5em;
transform: translateX(-25%) rotate(45deg);
}
.arrow::before, .arrow::after{
content: '';
position: absolute;
background: currentColor;
border-radius: 0.1em;
}
.arrow::before{ top: 0; left: 0; right: 0; height: 0.125em; }
.arrow::after{ top: 0; right: 0; bottom: 0; width: 0.125em; }



.blank{
padding-right: 16px;
}
.blank::after{
content: '';
display: inline-block;
background: url(../images/icn_blank.svg) no-repeat;
background-size: 100% 100%;
filter: invert(54%) sepia(8%) saturate(729%) hue-rotate(181deg) brightness(97%) contrast(93%);
width: 12px; height: 12px;
margin-left: .25em;
}
.blank:hover::after{
filter: invert(76%) sepia(34%) saturate(4726%) hue-rotate(191deg) brightness(100%) contrast(105%);
}


/* ================ テーブル ================ */
table{
border-collapse: collapse;
width: 100%;
}
table th, table td{
border-top: 2px solid #9b8037;
border-bottom: 2px solid #9b8037;
padding: 4px;
}
table th{
background: #fdf7dd;
}
@media screen and (max-width: 640px){
table th, table td{ padding: 2px; }
}

/* ====================================================================
    LOADING
====================================================================== */
#loading{
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: #fff;
z-index: 99;
}
#logo{
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 300px;
z-index: 100;
transition: all 2s ease;
animation: blinking 1s ease-in-out infinite alternate;
}
#logo.moved {
position: absolute;
top: 160px; left: calc(50% - 80px);
transform: translate(-50%, 0);
animation: none;
width: 500px;
}
/*#logo.resized{
width: 500px;
}*/
@keyframes blinking{
0%{ opacity: 0; }
100%{ opacity: 1; }
}
@media screen and (max-width: 840px){
#logo.moved{ width: 300px; }
/*#logo.resized{ width: 60%; }*/
}
@media screen and (max-width: 640px){
#logo{ width: 240px; }
#logo.moved{ width: 240px; left: calc( 50% - 40px ); }
#logo.moved{ top: 74px; }
}


/* ====================================================================
    HEADER
====================================================================== */
#logo-oto{
background: linear-gradient(-120deg, rgba(255, 255, 255, 1) 0%, rgba(253, 247, 221, 1) 50%, rgba(255, 223, 163, 1) 100%);
padding: 24px 0 16px 24px;
position: relative;
z-index: 10;
}
#logo-oto img{ width: 240px; height: auto; }
.sbdir #logo-oto img{ width: 200px;  }

@media screen and (max-width: 640px){
#logo-oto{ padding: 8px; }
#logo-oto img{ width: 140px; height: auto; }
.sbdir #logo-oto img{ width: 140px;  }
}

/* ====================================================================
    FOOTER
====================================================================== */
footer{
display: flex;
align-items: center;
justify-content: center;
height: 120px;
}
footer h2{ width: 180px; margin: 0 auto; }

#pagetop{
position: fixed;
bottom: 60px; right: 40px;
background: rgba( 255, 255, 255, .75);
border-radius: 53% 47% 39% 61% / 47% 41% 59% 53%;
z-index: 999;
}
#pagetop a{
width: 60px; height: 60px;
display: block;
text-align: center;
color: #0ba4e9;
font-size: 14px;
font-weight: 500;
padding-top: 20px;
}
.pagetop-arrow{
position: absolute;
top: 12px; left: 0; right: 0;
margin: auto;
display: inline-block;
width: 21px; height: 12.5px;
}
.pagetop-arrow::before,
.pagetop-arrow::after {
content: "";
position: absolute;
top: 0;
left: calc(50% - 1px);
width: 2px; height: 8px;
border-radius: 9999px;
background-color: #0ba4e9;
transform-origin: 50% 1.5px;
}
.pagetop-arrow::before { transform: rotate(45deg); }
.pagetop-arrow::after { transform: rotate(-45deg); }

@media screen and (max-width: 640px){
footer{ height: 80px; }
footer h2{ width: 120px; }
#pagetop{  bottom: 16px; right: 16px; }
}

/* ==============================
    ドロワーナビ
============================== */
.drawer{
position: fixed;
top: 0; left: 50%;
width: 50%; height: 100%;
-webkit-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: ease .5s;
transition: ease .5s;
z-index: 999;
background: rgba(51, 51, 51, .9 );
}
.drawer.action{
-webkit-transform: translateX(0);
transform: translateX(0);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

.drawer-container.action{
position: relative;
-webkit-transition: ease .5s;
transition: ease .5s;
}
.drawer-container.action:after{
content: '';
position: absolute;
z-index: 998;
left: 0; top: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, .5);
}

@media screen and (max-width: 960px){
#container.action:after{ content: none; }
.drawer{ width: 100%; left: 0; }
}


.drbtn {
position: fixed;
top: -40px; right: -40px;
width: 120px; height: 120px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
-webkit-transition:ease .5s;
transition:ease .5s;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
z-index: 1000;
/*background: rgba(112, 144, 212, 1);*/
background: #8f691f;
}

@media screen and (max-width: 640px){
.drbtn { top: -24px; right: -24px; width: 80px; height: 80px; }
}

/* ==============================
    トグル
============================== */
.hambarg{
position: absolute;
display: block;
width: 32px; height: 2px;
left: 28px;
background: #fff;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-webkit-transition: ease .5s;
transition: ease .5s;
}

.hambarg:nth-child(1){ top: 64px; }
.hambarg:nth-child(2){ top: 72px; }
.hambarg:nth-child(3){ top: 80px; }

.drbtn.action .hambarg:nth-child(1) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 72px;
}
.drbtn.action .hambarg:nth-child(2) {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
opacity: 0;
}
.drbtn.action .hambarg:nth-child(3) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 72px;
}

@media screen and (max-width: 640px){
.hambarg{ left: 14px; }
.hambarg:nth-child(1){ top: 38px; }
.hambarg:nth-child(2){ top: 46px; }
.hambarg:nth-child(3){ top: 54px; }
.drbtn.action .hambarg:nth-child(1) { top: 46px; }
.drbtn.action .hambarg:nth-child(3) { top: 46px; }
}

/* ==============================
    ドロワーメニュー
============================== */
.drawer{
background: linear-gradient(-120deg, rgba(255, 255, 255, 1) 0%, rgba(253, 247, 221, 1) 50%, rgba(255, 223, 163, 1) 100%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.drawer ul{ margin-top: 10vw; }
.drawer li{ position: relative; }
.drawer a{
display: block;
font-size: 22px;
font-weight: 500;
color: #9b8037;
padding: .25em 0 .25em 24px;
}
.drawer li span{
position: absolute;
top: 0; bottom: 0; left: 0;
margin: auto;
}

.drawer p{
margin: auto 0 16px 0;
width: 140px;
}

/* ==============================
    スクロールアニメ
============================== */
.slide-in, .zoom-in{ opacity: 0; transition: all .8s ease; }
.slide-in.active, .zoom-in.active{ opacity: 1; }

.slide-in{ transform: translateX(-100%); }
.slide-in.active{ transform: translateX(0); }

.zoom-in{ transform: scale(0.5); }
.zoom-in.active{ transform: scale(1); }

.stretch{
display: block;
width: 0; height: 3px;
background: #9b8037;
border-radius: 2px;
transition: all 1s ease;
margin-bottom: 24px;
}
.stretch.active{ width: 100%; }

.delay1{ transition-delay: .2s; }
.delay2{ transition-delay: .4s; }
.delay3{ transition-delay: .6s; }
.delay4{ transition-delay: .8s; }
.delay5{ transition-delay: 1s; }

@media screen and (max-width: 640px){
.stretch{ margin-bottom: 16px; }
}