@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap');

html {
    font-size: 62.5%;
}

a {
    color: #a0520e;
    text-decoration: none;
}
a:hover{
    color: #a0520e;
    opacity: 0.7;
    cursor: pointer;
}

.wrap {
    width: 100%;
    text-align: center;
    font-family: 'Kosugi Maru', sans-serif;
    font-size: 1.4rem;
    background-image: url(../img/leaves.png);
    color: #a0520e;
    line-height: 2;
}
@media screen and (min-width:1025px) {
    .wrap {
        font-size: 1.6rem;
    }
}

/****************** ヘッダー ******************/
.header {
    width: calc(100% - 20px);
    height: 70px;
    padding: 10px 10px 5px 10px;
    background-color: #fff;
    border-top: 5px solid #ffecb5;
    border-bottom: 1px solid #ffecb5;
}
@media screen and (min-width:1025px) {
    .header {
        height: 100px;
    }
}

.header__logo img {
    width: calc( 100% - 10rem );
}
@media screen and (min-width:1025px) {
    .header__logo img {
        width: 300px;
    }
}
.header__title {
    text-align: left;
}

.header__tel {
    text-align: right;
    margin-top: -70px;
    margin-right: 45px;
    font-size: 2rem;
    color: #ff9391;
}

.header__tel img {
    width: 42px;
    position: fixed;
    top: 2rem;
    right: 6rem;
    z-index: 10;
    background: #fff;
    border-radius: 50%;
}

.header__nav {
    text-align: right;
    margin-top: 30px;
}

.header__span {
    font-size: 1.5rem;
    display: block;
}

.header__navitem {
    display: inline;
    padding-left: 1rem;
    padding-right: 1rem;
    border-left: 1px solid #a0520e;
}

.header__navitem:last-child {
    border-right: 1px solid #a0520e;
}

.header__navitem a {
    text-decoration: none;
    color: #a0520e;
}

.header__navitem a:hover {
    color: #ff9391;
}

/****************** なやみ ******************/
.nayami {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 30px;
    position: relative;
    text-align: left;
}
@media screen and (min-width:1025px) {
  .nayami {
    margin-left: 20px;
  }
}

.nayami__title {
    font-size: 1.8rem;
    font-weight: bold;
}

.nayami__list {
    background-color: #ffecb5;
    padding: 2rem;
    padding-left: 20px;
    border-radius: 5px;
    box-shadow: 5px 5px 2px #ccc;
    line-height: 2.5;
}

@media screen and (min-width:1025px) {
    .nayami__list {
        display: flex;
        flex-wrap: wrap;
        padding: 3rem;
        line-height: 3;
    }
    .nayami__item {
        width: 33%;
    }
}

.nayami__bold {
    font-size: 1.8rem;
    font-weight: bold;
}

.nayami__img {
    width: 100px;
    position: absolute;
    top: 380px;
    right: 0;
}
@media screen and (min-width:1025px) {
    .nayami__img  {
      width: 150px;
      top: 270px;
      right: 20px;
    }
}

/****************** 各ページ共通部分 ******************/
.page__section {
  text-align: left;
  border-radius: 5px;
}

.page__title {
    margin-bottom: 10px;
    font-size: 3rem;
    color: #a0520e;
    text-shadow: 1px 1px 0 #fff;
    font-style: italic;
    border-bottom: 1px solid #ffecb5;
    background-color: #fff;
}
.page__title-span {
    display: block;
    padding: 40px 0 40px 40px;
    background-image: url(../img/hand.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: brightness(1.05);
}
@media screen and (min-width:1025px) {
    .page__title {
        font-size: 4rem;
        text-shadow: 1px 1px 0 #ffecb5;
        margin-bottom: 5rem;
    }
    .page__title-span {
        margin: 0 auto;
        padding: 5rem;
        width: 80%;
        background-size: 450px;
        background-position: right center;
    }
}

.page__english {
  display: block;
  padding-right: 30px;
  font-size: 3rem;
  font-family: serif;
  color: #ffecb5;
  font-style: oblique;
  text-align: right;
    text-shadow: 1px 1px #ff96a7;
}

@media screen and (min-width:1025px) {
    .page__english  {
        display: inline;
        padding-left: 30px;
        text-align: left;
    }
}

.page__subsection {
    margin: 10rem 1rem;
    padding: 5rem 2.5rem;
    background-color: #fff;
    border-radius: 3rem;
    filter: drop-shadow(0 0 15px #eee);
}
@media screen and (min-width:1025px) {
    .page__subsection {
        margin: 10rem auto;
        padding: 10rem;
        width: 80%;
        border-radius: 5rem;
    }
}

.page__subtitle {
    margin-bottom: 2rem;
    text-align: left;
    font-weight: bold;
    font-size: 2rem;
    color: #ff9391;
    
    text-shadow: 1px 1px 0 #ffecb5;
    font-style: italic;
}
@media screen and (min-width:1025px) {
    .page__subtitle {
        margin-bottom: 3rem;
        font-size: 3rem;
    }
}

/****************** フッター ******************/
.footer {
    background-color: #ffecb5;
    text-align: left;
    line-height: 1.8;
}

.footer__logo img {
    width: 300px;
}

.footer__container  {
    padding: 10px;
}
@media screen and (min-width:1025px) {
    .footer__container  {
        display: flex;
        align-items: start;
        margin: 0 auto;
        width: 80%;
        gap: 5rem;
    }
}

.footer__right {
    margin-left: 3%;
}

.footer__small {
    display: block;
    text-align: center;
    font-size: 1.2rem;
    background-color: #fff;
}

/****************** 404エラーページ ******************/
.error404 {
    font-size: 3rem;
    color: red;
}

/***************************** ハンバーガーメニュー ****************************/
/* 通常時 */
.menu{
    display: inline-block;
    position: fixed;
    top: 2rem;
    right: 1rem;
    z-index: 30;
    width: 4rem;
    height: 4rem;
    cursor: pointer;
    background-color: #ff9391;
    border-radius: 50%;
    border: none;
    box-sizing: border-box;
    transition: all .5s;
}
.menu:focus{
    outline: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu__line{
    display: block;
    position: absolute;
    /*right: 0.75rem;
    width: 2.5rem;
    height: .2rem;*/
    right: 0.9rem;
    width: 2.2rem;
    height: .2rem;
    background-color: #fff;
    border-radius: .4rem;
    transition: all .5s;
}
.menu__line:nth-child(1){
    top: 1.2rem;
}
.menu__line:nth-child(2){
    top: 2.0rem;
}
.menu__line:nth-child(3){
    top: 2.8rem;
}
/* クリック時 */
.active .menu__line:nth-child(1){
    transform: translateY(.8rem) rotate(-45deg);
}
.active .menu__line:nth-child(2){
    opacity: 0;
}
.active .menu__line:nth-child(3){
    transform: translateY(-.8rem) rotate(45deg);
}
/* 通常時 */
.nav{
    position: fixed;
    top: 0;
    right: -55%;
    z-index: 20;
    padding: 7rem 0 4rem;
    background-color: #fff;
    transition: all .5s;
}
.nav__item{
    padding: .5rem 0;
}
.nav__link{
    color: #ff9391;
    font-size: 2rem;
    line-height: 2;
}
/* クリック時 */
.nav.active {
    width: 100%;
    right: 0;
    transition: all .5s;
}
/************************************ CSSアニメーション *****************************************/
.fwari {
    width: 80px;
    position: fixed;
    bottom: 80px;
    right: 30px;
    z-index: 20;
    
        filter: drop-shadow(10px 10px 5px #aaa);
}

@media screen and (min-width:1025px) {
    .fwari {
        width: 150px;
    }
}

.engine{
    animation:engine 0.2s infinite;
    -webkit-animation:engine 0.2s infinite;
    -moz-animation:engine 0.2s infinite;
    
        filter: drop-shadow(10px 10px 5px #aaa);
}
@keyframes engine{
    0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
    50%  { transform: scale(1.0, 0.98) translate(0%, 1.5%); }
    100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@-webkit-keyframes engine{
    0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
    50%  { -webkit-transform: scale(1.0, 0.98) translate(0%, 1.5%); }
    100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@-moz-keyframes engine{
    0%   { -moz-transform: scale(1.0, 1.0) translate(0%, 0%); }
    50%  { -moz-transform: scale(1.0, 0.98) translate(0%, 1.5%); }
    100% { -moz-transform: scale(1.0, 1.0) translate(0%, 0%); }
}

/****--------- 雲 ---------****/
.cloud{
    animation:cloud ease-in-out 4s infinite alternate;
    -webkit-animation:cloud ease-in-out 4s infinite alternate;
    -moz-animation:cloud ease-in-out 4s infinite alternate;
    
        filter: drop-shadow(10px 10px 5px #aaa);
}
@keyframes cloud{
    0%   { transform:translate(0%, 0%);  opacity:1;}
    100% { transform:translate(-30px, 0%); opacity:0;}
}
@-webkit-keyframes cloud{
    0%   { -webkit-transform:translate(0%, 0%);  opacity:1;}
    100% { -webkit-transform:translate(-30px, 0%); opacity:0;}
}
@-moz-keyframes cloud{
    0%   { -moz-transform:translate(0%, 0%);  opacity:1;}
    100% { -moz-transform:translate(-30px, 0%); opacity:0;}
}


/****--------- ふわふわ ---------****/
.fwari{
    animation:fwari ease-in-out 1s infinite alternate;
    -webkit-animation:fwari ease-in-out 1s infinite alternate;
    -moz-animation:fwari ease-in-out 1s infinite alternate;
    
        filter: drop-shadow(10px 10px 5px #aaa);
}
@keyframes fwari{
    0%   { transform:translate(0%, 0%); }
    100% { transform:translate(0%, -20px); }
}
@-webkit-keyframes fwari{
    0%   { -webkit-transform:translate(0%, 0%); }
    100% { -webkit-transform:translate(0%, -20px); }
}

@-moz-keyframes fwari{
    0%   { -moz-transform:translate(0%, 0%); }
    100% { -moz-transform:translate(0%, -20px); }
}
/****--------- ふりこ ---------****/
.pendulum{
    transform-origin:bottom;
    -webkit-transform-origin:bottom;
    -moz-transform-origin:bottom;
    animation:pendulum ease-in-out 2s infinite alternate;
    -webkit-animation:pendulum ease-in-out 2s infinite alternate;
    -moz-animation:pendulum ease-in-out 2s infinite alternate;
    
        filter: drop-shadow(10px 10px 5px #aaa);
 }
@keyframes pendulum{
    0%{transform: rotate(5deg);}
    100%{transform: rotate(-5deg);}
}
@-webkit-keyframes pendulum{
    0%{-webkit-transform: rotate(5deg);}
    100%{-webkit-transform: rotate(-5deg);}
}
@-moz-keyframes pendulum{
    0%{-moz-transform: rotate(5deg);}
    100%{-moz-transform: rotate(-5deg);}
}

/******************* レスポンシブ *******************/
.pc, .pc_inline {
    display: none;
}
@media screen and (min-width:1025px) {
    .pc {
        display: block;
    }
    .pc_inline {
        display: inline;
    }
    .sp, .br_sp {
        display: none;
    }
}