@charset "utf=8";

/* ↓2024.9.4更新↓ */
body {
  margin: 0;
}


/* ===↓fadeup初回読み込み時のみ↓=== */
#index .nav-fadeUp-01, .nav-fadeUp-02, .nav-fadeUp-03, .nav-fadeUp-04, .nav-fadeUp-05, .nav-fadeUp-06, .nav-fadeUp-07, .heading-price, .heading-l, .heading-work, .heading-m, .heading-s, .one-third, .light, .basic, .standard, .royal, .plan-btn, .attention, .campaign-area, .fe-head-h3, .fe-head-h4, .fe-uper, .fe-under {
  transition: 0.7s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
#index .s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11, .s12 {
  transition: 0.4s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
#index .nav-fadeUp-01.on, .nav-fadeUp-02.on, .nav-fadeUp-03.on, .nav-fadeUp-04.on, .nav-fadeUp-05.on, .nav-fadeUp-06.on, .nav-fadeUp-07.on, .heading-price.on, .heading-l.on, .heading-work.on, .heading-m.on, .heading-s.on, .one-third.on, .light.on, .basic.on, .standard.on, .royal.on, .plan-btn.on, .attention.on, .campaign-area.on, .fe-head-h3.on, .fe-head-h4.on, .fe-uper.on, .fe-under.on, .s1.on, .s2.on, .s3.on, .s4.on, .s5.on, .s6.on, .s7.on, .s8.on, .s9.on, .s10.on, .s11.on, .s12.on {
  transform: translateY(0);
  opacity: 1.0;
}
/* ===↑fadeup↑=== */

/* ↓緊急お問い合わせフォーム不可↓ */
.system-red {
  color: red;
  font-weight: bolder;
  padding-top: 30px;
  padding-left: 10px;
}



/* ===↓TOPへスクロールボタン↓=== */
html {
  scroll-behavior: smooth;
}

.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #ff0077;
  border: solid 2px #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.pagetop:hover {
  transform: translate(0, -15%);
}

.pagetop:active {
  transform: translate(0, -15%);
}

.pagetop__arrow {
  height: 10px;
  width: 10px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  transform: translateY(20%) rotate(-45deg);
}
/* ===↑TOPへスクロールボタン↑=== */

/* ↓ヘッダー固定 */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
/* ↑ヘッダー固定↑ */

/* ↓ヘッダー↓ */
@media screen and (min-width: 1000px) { /*パソコンヘッダー*/
  header .only-sp {
    display: none;
  }

  header .only-pc {
    width: 100%;
    height: auto;
    background-color: #fffff7;
    color: #ff0077;
    display: flex;
    padding: 10px 10px 3px 20px;
  }

  .only-pc .logo .logo-icon {
    width: auto;
    height: 40px;
    margin: auto;
    float: left;
    padding-top: 20px;
  }

  .only-pc .logo-text {
    width: auto;
    margin: auto auto auto 20px;
    float: left;
    line-height: 1.1;
  }

  .only-pc .logo-text-eng {
    font-size: 30px;
    line-height: 0;
    letter-spacing: 0.4rem;
    float: left;
  }

  .only-pc .logo-text-jap {
    font-size: 14px;
    line-height: 0;
    font-family: "Zen Kaku Gothic New";
    letter-spacing: 0.4rem;
    color: #3d3d3d;
  }

  .only-pc .navigation {
    float: right;
  }

  .only-pc .navigation .nav-area {
    list-style: none;
    width: auto;
  }

  .only-pc .navigation .nav-area .nav-list {
    font-family: "Sawarabi Mincho";
    font-size: 18px;
    float: left;
    width: 120px;
    margin-right: 20px;
    text-align: center;
  }

  .only-pc .navigation .nav-area .nav-list a {
    display: block; /*これにより文字上だけでなくボックス上でhoverになる*/
    color: #ff0077;
    text-decoration: none;
    width: auto;
  }

  .only-pc .navigation .nav-area .nav-list a:hover {
    color: #ff0077;
    font-weight: bold;
    letter-spacing: 2px;
    opacity: 1;
    visibility: visible;
  }

  .only-pc .navigation .nav-area .nav-list:hover ul {
    opacity: 1;
    visibility: visible;
  }
}

@media screen and (max-width: 1000px) { /*スマホヘッダー*/
  .only-pc {
    display: none;
  }
  
  /* ===↓ハンバーガーメニュー↓=== */
  header .only-sp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: #fefef1;
    position: relative;
  }
  
  header .only-sp .logo-icon {
    width: 30px;
  }
  
  header .only-sp .logo {
    color: #ff0077;
    line-height: 15px;
    padding-top: 10px;
  }
  
  header .only-sp .logo .eng-logo {
    font-family: 'M PLUS Rounded 1c';
    font-size: 18px;
    letter-spacing: 2px;
  }
  
  header .only-sp .logo .jap-logo {
    font-family: "Zen Kaku Gothic New";
    font-size: 8px;
    letter-spacing: 2px;
    color: #3d3d3d;
  }
  
  /* チェックボックスを非表示にする */
  .drawer_hidden {
    display: none;
  }
  
  /* ハンバーガーアイコンの設置スペース */
  .drawer_open {
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 100;/* 重なり順を一番上にする */
    cursor: pointer;
  }
  
  /* ハンバーガーメニューのアイコン */
  .drawer_open span,
  .drawer_open span:before,
  .drawer_open span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #ff0077;
    transition: 0.5s;
    position: absolute;
  }
  
  /* 三本線の一番上の棒の位置調整 */
  .drawer_open span:before {
    bottom: 8px;
  }
  
  /* 三本線の一番下の棒の位置調整 */
  .drawer_open span:after {
    top: 8px;
  }
  
  /* アイコンがクリックされたら真ん中の線を透明にする */
  #drawer_input:checked ~ .drawer_open span {
    background: rgba(255, 255, 255, 0);
  }
  
  /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
  #drawer_input:checked ~ .drawer_open span::before {
    bottom: 0;
    transform: rotate(45deg);
    background-color: #ffffff;
  }
  
  #drawer_input:checked ~ .drawer_open span::after {
    top: 0;
    transform: rotate(-45deg);
    background-color: #ffffff;
  }
  
  /* メニューのデザイン*/
  .only-sp .nav_content {
    width: 100%; /*単純に開いたナビエリアだけ正しくしたければここを50％でいいけどメインエリアはまだずれる*/
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%; /* メニューを画面の外に飛ばす */
    z-index: 99;
    background: #f9107c;
    transition: .5s;
    font-family: "Sawarabi Mincho";
  }
  
  /* メニュー黒ポチを消す */
  .only-sp .nav_list {
    list-style: none;
    margin-left: 50px;
    margin-top: 100px;
    line-height: 4;
    font-size: 14px;
    letter-spacing: 0.6em;
  }

  .only-sp .nav_list a {
    text-decoration: none;
    color: #ffffff;
  }
  
  .only-sp .nav_list a:hover {
    color: #000000;
    font-weight: bold;
  }
  
  /* アイコンがクリックされたらメニューを表示 */
  #drawer_input:checked ~ .nav_content {
    left: 0;/* メニューを画面に入れる */
  }
}
/* ===↑ハンバーガーメニュー↑=== */
/* ↑ヘッダー↑ */

#index { 
  background-color: #ffffff;  /*contactのbottomに謎の空白が入るため*/
  width: 100%;
}

#index .wrap {
  background-color: #ffffff;
}

/*===↓スライドショー↓===*/
.top-wrapper .top-fadeout-head {
  font-family: 'Shippori Mincho', serif;
  font-size: 2vw; /*熊本でデザインに～PCの大きさ*/
  letter-spacing: 1em;
  animation: kdfadeOut 2.1s step-end 0s 1 forwards;
  z-index: 2;
}
@media screen and (max-width: 1000px) { /*熊本でデザインに～スマホの時の大きさ*/
  .top-wrapper .top-fadeout-head {
    font-size: 4vw;
  }
}  

@keyframes kdfadeOut {
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

.top-wrapper .slider {
  animation: topsliderfadeIn 1s; /*keyframesの為のname,fadein時間*/
  animation-delay: 2s; /*スライドショーを遅らせて開始*/
  animation-fill-mode: both; /*再生後のスタイル*/
  opacity: 0;
  position:relative;
  z-index: 1;
/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

@keyframes topsliderfadeIn { /*スライドショー開始遅らすkeyframes*/
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

.top-wrapper .slider .slider-top,
.slider-bottom {
  height: 50vh;/*スライダー上下の縦幅を画面の高さの半分（50vh）にする*/
}

.top-wrapper .slider .slider-item01 {
  background:url(../images/uper01.jpg);
}

.top-wrapper .slider .slider-item02 {
  background:url(../images/uper02.jpg);
}

.top-wrapper .slider .slider-item03 {
  background:url(../images/uper03.jpg);
}

.top-wrapper .slider .slider-item04 {
  background:url(../images/under01.jpg);
}

.top-wrapper .slider .slider-item05 {
  background:url(../images/under02.jpg);
}

.top-wrapper .slider .slider-item06 {
  background:url(../images/under03.jpg);
}

.top-wrapper .slider .slider-item {
  width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height:50vh;/*各スライダーの縦幅を画面の高さの半分（50vh）にする*/
  background-repeat: no-repeat;/*背景画像をリピートしない*/
  background-position: center;/*背景画像の位置を中央に*/
  background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

.top-wrapper .slider ul{
  margin:0;
  padding: 0;
  list-style: none;
}

.top-wrapper .slider a{
  color: #fff;
}

.top-wrapper .slider a:hover,
a:active{
  text-decoration: none;
}

.top-wrapper .slider .top-informeldesign {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size:2vw;  /*PCのときの大きさ*/
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media screen and (max-width: 1000px) { /*トップinformeldesign、スマホの時の大きさ*/ 
  .top-wrapper .slider .top-informeldesign {
    font-size:5vw;
  }
}  
  

.top-wrapper .slider .white {
  color: #676767;
}
.top-wrapper .slider .pink {
  color: #ff0077;
}

.top-wrapper .slider .white, .pink {
  animation-name: pink-and-white;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes pink-and-white{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
.delay-p1, .delay-w9 {
  animation-delay: 2.4s; /*スライドショー開始2s遅らせた為以降全て+2s*/
}
.delay-p3{
animation-delay: 2.8s;
}
.delay-w4 {
animation-delay: 3s;
}
.delay-p5, .delay-w6 {
  animation-delay: 3.4s;
}
.delay-p2{
animation-delay: 3.8s;
}
.delay-w7 {
animation-delay: 4s;
}
.delay-w1, .delay-w8 {
  animation-delay: 4.4s;
}
.delay-w5 {
animation-delay: 4.8s;
}
.delay-p4, .delay-w2 {
animation-delay: 5.2s;
}

.top-wrapper .slider .container{
  background:#555;
}

.top-wrapper .slider .container p{
  padding: 300px 0; 
  text-align: center;
  color: #fff;
}
/* ===↑スライドショー↑=== */

/* ↓流れるテキスト↓ */
.loop-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 50px;
  background-color: #ff0077;
}
.loop-area {
  display: flex;
  animation: loop-slide 20s infinite linear 1s both;
  list-style: none;
  margin: 0;
  padding: 0;
}
.loop-area .loop-text {
  font-family: "Zen Kaku Gothic New";
  width: 500px; /*あとで500px相当に*/
  color: #ffffff;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

    @media screen and (max-width: 600px) { /*スマホ*/
      .loop-wrap {
        height: 30px;
      }
    }

/* ↑流れるテキスト↑ */

/* ↓メインナビエリア↓ */
@media screen and (min-width: 1000px) { /*PC*/
  #index .main-nav {
    font-size: 14px;
    font-family: "Zen Kaku Gothic New";
    background-size: cover;
    width: 700px; /*あとで700px相当に*/
    margin: 100px auto;
    padding: 50px 0;
    overflow: hidden;
    text-align: center;
    line-height: 2.5;
    border: solid 1px#333;
    border-top: 0;
    border-bottom: 0;
  }

  #index .main-nav a {
    color: #3b2f2f;
    text-decoration: none;
    letter-spacing: 10px;
    font-family: "Zen Kaku Gothic New";
    line-height: 2;
    font-weight: 400;
  }

  #index .main-nav a:hover {
    color: #ff0077;
    text-decoration: none;
    letter-spacing: 17px;
    font-family: "Zen Kaku Gothic New";
    font-weight: 600;
  }

  #index .main-nav .d-txt.d-line {
    position: relative;
  }

  #index .main-nav .d-line::before {
    background: #ff0077;
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: auto;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
  }

  #index .main-nav .d-line:hover::before {
    transform-origin: left top;
    transform: scale(1, 1);
  }
}

    @media screen and (max-width: 1000px) { /*スマホ*/
      #index .main-nav {
        background-size: cover;
        width: 80%;
        margin: 100px auto;
        padding: 20px 0;
        overflow: hidden;
        text-align: center;
        line-height: 1.7;
        border: solid 1px#333;
        border-top: 0;
        border-bottom: 0;
      }

      #index .main-nav a {
        color: #3b2f2f;
        text-decoration: none;
        font-family: "Zen Kaku Gothic New";
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 5px;
      }
      
      #index .main-nav a:hover {
        color: #ff0077;
        text-decoration: none;
        font-weight: 600;
        letter-spacing: 8px;
      }
      
      #index .main-nav .d-txt.d-line {
        position: relative;
      }
      
      #index .main-nav .d-line::before {
        background: #ff0077;
        content: '';
        width: 100%;
        height: 2px;
        position: absolute;
        left: 0;
        bottom: 0;
        margin: auto;
        transform-origin: right top;
        transform: scale(0, 1);
        transition: transform .3s;
      }
      
      #index .main-nav .d-line:hover::before {
        transform-origin: left top;
        transform: scale(1, 1);
      }
    }
/* ↑メインナビエリア↑ */

/* ↓流れる画像↓ */
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.d-demo__wrap {
  clear: both;  /* featuresのためのクリア */
  display: flex;
  overflow: hidden;
}

.d-demo__list {
  display: flex;
  list-style: none;
}

.d-demo__list--left{
animation :infinity-scroll-left 30s infinite linear 0.5s both;
}

@media screen and (min-width: 1000px) {
.d-demo__item {
  width: calc(100vw / 6);
}
}
@media screen and (max-width: 1000px) {
.d-demo__item {
  width: calc(100vw / 2);
}
}

.d-demo__item > img{
   width: 90%;
   border-radius: 5px;
}

    @media screen and (max-width: 1000px) { /*スマホ*/
      @media screen and (min-width: 1000px) {
          .d-demo__item {
            width: calc(100vw / 9);
          }
        }
        @media screen and (max-width: 1000px) {
          .d-demo__item {
            width: calc(100vw / 3);
          }
      }
    }
/* ↑流れる画像↑ */

/* ↓headerホームページ制作についてエリア↓ */
  @media screen and (min-width: 1000px) { /*PC*/
    #index .main .features {
      text-align: center;
      margin: 50px auto;
    }
    
    #index .main .features .heading {
      width: auto;
      margin: 100px auto 50px auto;
      font-family: "Shippori Antique";
      display: inline-block;
    }
    
    #index .main .features .heading h2 {
      width: auto;
      margin: 70px auto 30px;
      display: block;
      font-size: 20px;
      text-align: center;
      letter-spacing: 6px;
      font-family: "Noto Sans JP";
      color: #000000;
      text-decoration: underline; /* 下線 */
      text-decoration-thickness: 0.5em; /* 線の太さ */
      text-decoration-color: #ff3366;/* 線の色 */
      text-underline-offset: -0.2em; /* 線の位置。やや上部にする */
      text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない */
    }
    
    #index .main .features .heading-price {
      clear: both;
      width: auto;
      margin: 100px 10px 30px 50px;
      float: left;
    }

    #index .main .features .heading-price img {
      margin: auto;
      width: 600px;
    }

    #index .main .features .heading-l {
      float: left;
      text-align: left;
      margin: 100px 20px 100px 50px;
      width: auto;
      line-height: 1.1;
      font-size: 30px;
    }

    #index .main .features .heading-l .heading-semistrong  {
      font-weight: bold;
      font-family: "Zen Kaku Gothic";
      font-size: 27px;
      color: #ff3366;
      letter-spacing: 5px;
    }
    
    #index .main .features .heading-l .heading-strong  {
      font-weight: bolder;
      font-family: "Zen Kaku Gothic";
      font-size: 60px;
      color: #ff3366;
      letter-spacing: 10px;
    }

    #index .main .features .heading-work {
      clear: both;
      width: auto;
      margin: 120px auto;
    }

    #index .main .features .heading-work .pc-img {
      width: 75%;
    }

    #index .main .features .heading-work .sp-img {
      display: none;
    }

    #index .main .features .heading-m {
      display: none;
    }

    #index .main .features .heading-s {
      text-align: left;
      width: auto; /*あとで800px相当に*/
      font-size: 20px;
      font-weight: bold;
      color: #515151;
      letter-spacing: 8px;
      margin: 100px auto;
      display: flex;
      justify-content: center; /*flexの中央寄せ*/
    }
  }

    @media screen and (max-width: 1000px) { /*スマホ*/
      
      #index .main .features {
        margin: 70px auto;
        width: 100vw;
      }
      
      #index .main .features .heading {
        margin: 10px auto;
        width: auto;
        text-align: center;
        display: inline-block;
      }

      #index .main .features .heading h2 {
        font-size: 18px;
        margin-bottom: 50px;
        text-align: center;
        letter-spacing: 6px;
        font-weight: bold;
        font-family: "Noto Sans JP";
        color: #000000;
        text-decoration: underline; /* 下線 */
        text-decoration-thickness: 0.5em; /* 線の太さ */
        text-decoration-color: #ff3366bc;/* 線の色 */
        text-underline-offset: -0.2em; /* 線の位置。やや上部にする */
        text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない */
      }

      #index .main .features .heading-price {
        text-align: center;
        margin: 10px auto 30px;
      }

      #index .main .features .heading-price img {
        width: 90%;
      }

      #index .main .features .heading-l {
        width: auto;
        margin: 0 auto 30px auto;
        display: inline-block;
        color: #6d6d6d;
        letter-spacing: 7px;
        font-size: 15px;
        font-weight: bolder;
        text-align: left;
      }

      #index .main .features .heading-l .heading-semistrong  {
        white-space: nowrap;  /*文字を改行せずに横幅に合わせる*/
        font-weight: bold;
        font-family: "M PLUS Rounded 1c";
        font-size: 16px;
        letter-spacing: 2px;
        color: #ff3366;
        line-height: 1.4;
      }

      #index .main .features .heading-l .heading-strong  {
        white-space: nowrap;  /*文字を改行せずに横幅に合わせる*/
        font-weight: bolder;
        font-family: "Murecho", sans-serif;
        font-size: 30px;
        color: #ff3366;
        line-height: 1.6;
      }

      #index .main .features .heading-work {
        text-align: center;
        margin: 10px auto 50px;
      }

      #index .main .features .heading-work .sp-img {
        width: 100%;
      }

      #index .main .features .heading-work .pc-img {
        display: none;
      }

      #index .main .features .heading-m {
        width: auto;
        font-size: 17px;
        letter-spacing: 3px;
        line-height: 1.7;
        margin: 40px auto;
        font-weight: bold;
        color: #005972;
        text-align: left;
        display: flex;
        justify-content: center; /*flexの中央寄せ*/
        font-family: "M PLUS Rounded 1c";
      }

      #index .main .features .heading-s {
        width: 90%;
        font-size: 12px;
        letter-spacing: 5px;
        line-height: 1.4;
        margin: 30px;
        text-align: left;
        width: auto; /*あとで800px相当に*/
        font-weight: bold;
        color: #515151;
        letter-spacing: 5px;
        display: flex;
        justify-content: center; /*flexの中央寄せ*/
      }
    }
/* ↑headerホームページ制作についてエリア↑ */


/* ↓6box（PC基準）↓ */
#index .main .features .flex-box {
  background:url(../images/dott-pink03.jpg);
  background-size: cover;
  margin-top: 20px;
}

#index .main .features .flex-box .flex-uper, .flex-under {
  display: -webkit-box; /*旧バージョン用*/
  display: -ms-flexbox; /*旧バージョン用*/
  display: flex;
  justify-content: center; /*flexの中央寄せ*/
  width: 70%;
  margin: auto;
  font-size: 15px;
  text-align: center;
}

#index .main .features .flex-box .flex-uper .one-third {
  font-family: "M PLUS Rounded 1c";
  width: 30%;
  margin: 50px 10px;
  background-color: #ffffff;
  border: 6px solid rgba(18, 56, 51, 0.244);
  border-radius: 5px;
}

#index .main .features .flex-box .flex-uper .one-third h3 {
  font-family: "Kaisei Decol";
  font-size: 22px;
  letter-spacing: 13px;
  margin: 30px 0 15px;
  height: 50px;
  color: #005972;
}

#index .main .features .flex-box .flex-uper .one-third p {
  padding: 0 10px;
  width: auto;
  margin-bottom: 20px;
  letter-spacing: 2px;
  text-align: left;
  color: #6d6d6d;
}

#index .main .features .flex-box .flex-uper .one-third img {
  width: 80px;
  margin-top: -50px; /*上に半分はみ出させる*/
}

#index .main .features .flex-box .flex-under .one-third {
  font-family: "M PLUS Rounded 1c";
  width: 30%;
  margin: 50px 10px;
  background-color: #ffffff;
  border: 6px solid rgba(18, 56, 51, 0.244);
  border-radius: 5px;
}

#index .main .features .flex-box .flex-under .one-third h3 {
  font-family: "Kaisei Decol";
  font-size: 22px;
  letter-spacing: 13px;
  margin-top: 30px;
  height: 50px;
  color: #005972;
}

#index .main .features .flex-box .flex-under .one-third p {
  padding: 0 10px;
  width: auto;
  margin-bottom: 20px;
  letter-spacing: 2px;
  text-align: left;
  color: #6d6d6d;
}

#index .main .features .flex-box .flex-under .one-third img {
  width: 80px;
  margin-top: -50px; /*上に半分はみ出させる*/
}

  @media screen and (max-width: 1000px) { /*スマホ*/
  #index .main .features .flex-box .flex-uper, .flex-under {
    width: 100%;
    margin: auto;
    text-align: center;
  }

  #index .main .features .flex-box .flex-uper .one-third {
    margin: 30px 5px;
    border: 2px solid rgba(18, 56, 51, 0.244);
  }

  #index .main .features .flex-box .flex-uper .one-third h3 {
    font-size: 11px;
    margin-top: 15px;
    height: 30px;
    letter-spacing: 1px;
  }

  #index .main .features .flex-box .flex-uper .one-third p {
    text-align: left;
    margin-bottom: 20px;
    letter-spacing: 1px;
    line-height: 1.5;
    font-size: 10px;
  }

  #index .main .features .flex-box .flex-uper .one-third img {
    width: 40px;
    margin-top: -50px; /*上に半分はみ出させる*/
  }

  #index .main .features .flex-box .flex-under .one-third {
    margin: 30px 5px;
    border: 2px solid rgba(18, 56, 51, 0.244);
  }

  #index .main .features .flex-box .flex-under .one-third h3 {
    font-size: 11px;
    margin-top: 15px;
    height: 30px;
    letter-spacing: 1px;
  }

  #index .main .features .flex-box .flex-under .one-third p {
    text-align: left;
    margin-bottom: 20px;
    letter-spacing: 1px;
    line-height: 1.5;
    font-size: 10px;
  }

  #index .main .features .flex-box .flex-under .one-third img {
    width: 40px;
    margin-top: -50px; /*上に半分はみ出させる*/
  }
}
/* ↑6BOX（PC基準）↑ */




/* ↓プライスエリア↓ */
#index .main .main-hp-price {
  width: auto;
  height: auto;
  margin: 70px auto 0;
  padding-top: 50px;
  background-image: url(../images/bg-red.jpg);
  background-size: cover;
}

  @media screen and (min-width: 1000px) { /*PC*/
    #index .main .main-hp-price .sp-only {
      display: none;
    }

    #index .main .main-hp-price .pc-only .price-head {
      text-align: center;
      letter-spacing: 10px;
      font-size: 20px;
      font-weight: bold;
      font-family: "Noto Sans JP";
      color: #000000;
      text-decoration: underline; /* 下線 */
      text-decoration-thickness: 0.5em; /* 線の太さ */
      text-decoration-color: #ff3366;/* 線の色 */
      text-underline-offset: -0.2em; /* 線の位置。やや上部にする */
      text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない */
    }


    #index .main .main-hp-price .pc-only .price-table-area {
      display: flex;
      justify-content: center;
      width: 90%;
      margin: 50px auto;
      text-align: center;
    }

    #index .main .main-hp-price .pc-only .price-table-area section {
      width: 24%;
      margin: 4px;
      padding: 10px;
      float: left;
      background-color: #ffffff;
      color: #575700;
      border-radius: 10px;
      border: solid 1px #707070;
      display: flex; /*box内のテキストを揃えるためのflex*/
      flex-direction: column; /*box内のテキストの高さを揃える*/
    }

    #index .main .main-hp-price .pc-only .price-table-area .plan {
      font-size: 20px;
      font-weight: bold;
      color: #005972;
      letter-spacing: 5px;
      padding: 20px 0;
      flex-grow: 1; /*box内のテキストの高さを揃える伸び率*/
    }

    #index .main .main-hp-price .pc-only .price-table-area .price {
      font-size: 30px;
      font-weight: bold;
      color: #c1a400;
      letter-spacing: 5px;
      flex-grow: 1; /*box内のテキストの高さを揃える伸び率*/
    }

    #index .main .main-hp-price .pc-only .price-table-area .page {
      font-size: medium;
      font-weight: bold;
      padding: 10px 0;
      flex-grow: 1; /*box内のテキストの高さを揃える伸び率*/
    }

    #index .main .main-hp-price .pc-only .price-table-area .explanation {
      font-size: 12px;
      letter-spacing: 4px;
      padding: 10px;
      flex-grow: 1; /*box内のテキストの高さを揃える伸び率*/
    }

    #index .main .main-hp-price .pc-only .price-table-area .example {
      font-size: medium;
      padding: 20px 0;
      flex-grow: 1; /*box内のテキストの高さを揃える伸び率*/
    }
  }

  @media screen and (max-width: 1000px) { /*スマホ*/
    #index .main .main-hp-price .pc-only {
      display: none;
    }

    #index .main .main-hp-price .price-head {
      text-align: center;
      letter-spacing: 10px;
      margin: 0 auto 50px;
      font-size: 14px;
      font-weight: bold;
      font-family: "Noto Sans JP";
      color: #000000;
      text-decoration: underline; /* 下線 */
      text-decoration-thickness: 0.5em; /* 線の太さ */
      text-decoration-color: #ff3366bc;/* 線の色 */
      text-underline-offset: -0.2em; /* 線の位置。やや上部にする */
      text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない */
    }

    #index .main .main-hp-price .sp-only .price-table-area {
      width: 90%;
      margin: auto;
      text-align: center;
    }

    #index .main .main-hp-price .sp-only .uper, .under {
      display: flex;
    }

    #index .main .main-hp-price .sp-only .price-table-area section {
      width: 45%;
      margin: 5px;
      padding: 10px;
      border: solid 1px #bbbbbb;
      display: flex; /*box内のテキストを揃えるためのflex*/
      flex-direction: column; /*box内のテキストの高さを揃える*/
    }

    #index .main .main-hp-price .sp-only .price-table-area .light  {
      background-color: #ffffff;
      color: #000000;
    }

    #index .main .main-hp-price .sp-only .price-table-area .basic  {
      background-color: #ffffff;
      color: #000000;
    }

    #index .main .main-hp-price .sp-only .price-table-area .standard  {
      background-color: #ffffff;
      color: #000000;
    }

    #index .main .main-hp-price .sp-only .price-table-area .royal  {
      background-color: #ffffff;
      color: #000000;
    }

    #index .main .main-hp-price .sp-only .price-table-area .plan {
      font-size: 3vw;
      font-weight: bold;
      color: #005972;
      letter-spacing: 3px;
      margin-bottom: 10px;
      flex-grow: 1; /*box内のテキストの高さを揃える伸び率*/
    }

    #index .main .main-hp-price .sp-only .price-table-area .price {
      font-size: 4vw;
      font-weight: bold;
      color: #c1a400;
      letter-spacing: 3px;
      margin-bottom: 10px;
      flex-grow: 1; /*box内のテキストの高さを揃える伸び率*/
    }

    #index .main .main-hp-price .sp-only .price-table-area .page {
      font-size: 1.5vh;
      font-weight: bold;
      padding: 10px 0;
      flex-grow: 1; /*box内のテキストの高さを揃える伸び率*/
    }

    #index .main .main-hp-price .sp-only .price-table-area .explanation {
      font-size: 10px;
      text-align: left;
      padding: 5px 0 0 5px; /*右側の余白と合わせるためのleft5px*/
      letter-spacing: 2px;
      flex-grow: 1; /*box内のテキストの高さを揃える伸び率*/
    }

    #index .main .main-hp-price .sp-only .price-table-area .example {
      font-size: 8px;
      letter-spacing: 2px;
      flex-grow: 1; /*box内のテキストの高さを揃える伸び率*/
    }

    #index .main .main-hp-price .attention {
      font-size: 12px;
      letter-spacing: 1px;
      width: 95%;
  }

  #index .main .main-hp-price .attention p {
    padding-top: 6px;
  }
}

#index .main .main-hp-price .attention {
  width: 80%; /*あとで800px相当に*/
  margin: 50px auto;
  color: #3e3e3e;
}

#index .main .main-hp-price .attention a {
  color: #1500f8;
  font-size: smaller;
}

/* ↑プライスエリア↑ */

/* ↓プラン２ボタン↓ */
#index .main .plan-btn {
  text-align: center;
  margin-top: 30px;
} 

#index .main .plan-btn a {
  text-decoration: none;
} 

#index .main .plan-btn .plan-btn-a {
  background-color: #0d009d;
  opacity: 100%;  
  color: #ffffff;
  border-radius: 25px;
  padding: 15px 15px;
  width: 280px;
  margin: 15px auto;
  letter-spacing: 2px;
  font-size: 15px;
  font-family: 'Courier New', Courier, monospace;
} 

#index .main .plan-btn .plan-btn-b {
  background-color: #e6006b;
  opacity: 100%;    
  color: #ffffff;
  border-radius: 25px;
  padding: 15px 15px;
  width: 280px;
  margin: 15px auto;
  letter-spacing: 2px;
  font-size: 15px;
  font-family: 'Courier New', Courier, monospace;
}

#index .main .plan-btn .plan-btn-a:hover {
  opacity: 50%;
  cursor: pointer;
}

#index .main .plan-btn .plan-btn-b:hover {
  opacity: 50%;
  cursor: pointer;
}

@media screen and (min-width: 1000px) { /*PC*/
  #index .main .plan-btn {
    width: auto;
    margin: 100px auto;
    padding: auto;
    display: flex;
    justify-content: center;
  }
  
  #index .main .plan-btn .plan-btn-a {
    float: left;
    width: 400px;
    margin-right: 10px;
    padding: 30px 35px;
    border-radius: 80px;
    font-size: 20px;
  }

  #index .main .plan-btn .plan-btn-b {
    float: left;
    width: 400px;
    margin-left: 10px;
    padding: 30px 35px;
    border-radius: 80px;
    font-size: 20px;
  }
}
/* ↑プラン２ボタン↑ */

/* ↓オープンキャンペーン↓ */
@media screen and (min-width: 1000px) { /*PC*/
  #index .main .campaign-area {
    clear: both;
    text-align: center;
    margin: 30px auto 0 auto;
    width: auto;
    padding: 50px 0;
  }

  #index .main .campaign-area .campaign-news {
    color: #c1a400;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
  }

  #index .main .campaign-area .campaign-head {
    font-family: "Zen Kaku Gothic New";
    font-size: 25px;
    letter-spacing: 15px;
    margin: 10px auto 30px auto;
    background-color: #ffa200;
    border: double 5px;
    border-radius: 10px;
    color: #ffffff;
    font-weight: bolder;
    display: block;
    width: 700px;
    padding: 10px;
  }

  #index .main .campaign-area .campaign-title {
    color: #3e3e3e;
    font-size: 30px;
    letter-spacing: 10px;
  }

  #index .main .campaign-area details {
    color: #3e3e3e;
    margin-bottom: 40px;
  }
}

    @media screen and (max-width: 1000px) { /*スマホ*/
      #index .main .campaign-area {
        clear: both;
        text-align: center;
        margin: 10px auto 0;
        width: auto;
        padding: 10px 5px;
      }
    
      #index .main .campaign-area .campaign-news {
        color: #c1a400;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 2px;
        font-family: 'Courier New', Courier, monospace;
      }
    
      #index .main .campaign-area .campaign-head {
        font-family: "Zen Kaku Gothic New";
        font-size: 15px;
        letter-spacing: 7px;
        margin: 8px auto 15px auto;
        background-color: #ffa200;
        border: double 4px;
        border-radius: 8px;
        color: #ffffff;
        font-weight: bolder;
        display: block;
        width: 70%;
        padding: 5px 10px;
      }
    
      #index .main .campaign-area .campaign-title {
        color: #3e3e3e;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 10px;
        margin-bottom: 10px;
      }
    
      #index .main .campaign-area details {
        color: #3e3e3e;
        margin-bottom: 20px;
        font-size: 10px;
      }
    }
/* ↑オープンキャンペーン↑ */

/* ↓デザインを×デザインで↓ */
@media screen and (min-width: 1000px) { /*pc*/
  #index .main .fun-evolve-sp {
    display: none;
  }

  #index .main .fun-evolve-pc {
    background-color: #f9107c;
    width: 100%;
    margin: auto;
    padding: 100px 0 50px 0;
    font-family: 'Sawarabi Mincho';
    color: #fffffd;
  }

  #index .main .fun-evolve-pc::after {
    content: '';                /* 空の要素を作成 */
    display: block;     /* インラインブロックにする */
    top: 0;                  /* 位置調整 */
    padding: 20px;
  }

  #index .main .fun-evolve-pc h3 {
    text-align: center;
    padding-bottom: 100px;
    font-size: 30px;
    letter-spacing: 0.7em;
    color: #eeff00;
  }

  #index .main .fun-evolve-pc h4 {
    text-align: center;
    padding-bottom: 50px;
    font-size: 18px;
    letter-spacing: 0.6em;
    line-height: 2em;
    font-weight: 100;
  }

  #index .main .fun-evolve-pc .fe-uper {
    overflow: hidden;
    width: 65%;
    margin: 100px auto;
  }

  #index .main .fun-evolve-pc .fe-uper .fe-text {
    float: left;
    width: 60%;
    padding-right: 100px;
  }

  #index .main .fun-evolve-pc .fe-uper .fe-text-m {
    font-family: "Zen Kaku Gothic New";
    margin-bottom: 20px;
    font-size: 25px;
  }

  #index .main .fun-evolve-pc .fe-uper .fe-text-s {
    font-size: 20px;
    line-height: 1.8;
  }

  #index .main .fun-evolve-pc .fe-uper img {
    width: 25%;
    float: right;
  }

  #index .main .fun-evolve-pc .fe-under {
    overflow: hidden;
    width: 65%;
    margin: 100px auto 0;
  }

  #index .main .fun-evolve-pc .fe-under .fe-text {
    float: right;
    width: 60%;
    padding-left: 120px;
  }

  #index .main .fun-evolve-pc .fe-under .fe-text-m {
    font-family: "Zen Kaku Gothic New";
    margin-bottom: 20px;
    font-size: 25px;
  }

  #index .main .fun-evolve-pc .fe-under .fe-text-s {
    font-size: 20px;
    line-height: 1.8;
  }

  #index .main .fun-evolve-pc .fe-under img {
    float: left;
    width: 25%;
  }
}

@media screen and (max-width: 1000px) { /*スマホ*/
  #index .main .fun-evolve-pc {
    display: none;
  }
  
  #index .main .fun-evolve-sp {
    background-color: #f9107c;
    width: 100%;
    margin: auto;
    font-family: 'Sawarabi Mincho';
    color: #fffffd;
  }

  #index .main .fun-evolve-sp::after {
    content: '';                /* 空の要素を作成 */
    display: block;     /* インラインブロックにする */
    top: 0;                  /* 位置調整 */
    padding: 20px;
  }

  #index .main .fun-evolve-sp h3 {
    font-family: 'Sawarabi Mincho';
    text-align: center;
    padding: 50px 0;
    font-size: 16px;
    letter-spacing: 1em;
    line-height: 2.5;
    color: #eeff00;
  }

  #index .main .fun-evolve-sp h4 {
    margin: auto;
    width: 90%;
    font-size: 9px;
    letter-spacing: 4px;
    line-height: 2;
  }

  #index .main .fun-evolve-sp .fe-uper {
    width: 100%;
    padding: 50px 0 20px;
  }

  #index .main .fun-evolve-sp .fe-uper .fe-text {
    width: 60%;
    float: left;
    padding-left: 10px;
  }

  #index .main .fun-evolve-sp .fe-uper .fe-text-m {
    font-family: "Zen Kaku Gothic New";
    margin: 10px;
    font-size: 13px;
    letter-spacing: 5px;
  }
  
  #index .main .fun-evolve-sp .fe-uper .fe-text-s {
    font-size: 10px;
    line-height: 1.8;
    letter-spacing: 1px;
  }
  
  #index .main .fun-evolve-sp .fe-uper img {
    width: 40%;
    padding-left: 10px;
  }
  
  #index .main .fun-evolve-sp .fe-under {
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
  }

  #index .main .fun-evolve-sp .fe-under .fe-text {
    width: 60%;
    float: right;
    padding-right: 10px;
  }

  #index .main .fun-evolve-sp .fe-under .fe-text-m {
    font-family: "Zen Kaku Gothic New";
    margin: 10px;
    font-size: 13px;
    letter-spacing: 5px;
  }

  #index .main .fun-evolve-sp .fe-under .fe-text-s {
    font-size: 10px;
    line-height: 1.8;
    letter-spacing: 1px;
  }
  
  #index .main .fun-evolve-sp .fe-under img {
    float: right;
    width: 40%;
    padding-right: 10px;
  }
  
}

/* ↑デザインを×デザインで↑ */

/* ↓テキストhoverで伸びる下線↓ */
.c-txt {
  cursor: pointer;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  color: #ffee00;
  display: inline-block;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.06em;
}.c-txt.line {
  padding-bottom: 5px;
  position: relative;
}
.c-txt.line::before {
  background:#f4ffb7;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.c-txt.line:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
/* ↑テキストhoverで伸びる下線↑ */

/* ↓デザインを×デザインで内お客様の声（スマホ基準）↓ */
#index .main .client {
  text-align: center;
  margin: 40px auto 5px;
} 

#index .main .client a {
  text-decoration: none;
} 

#index .main .client-btn {
  background-color: #b6c300;
  opacity: 100%;  
  color: #ffffff;
  border-radius: 25px;
  padding: 15px;
  width: 200px;
  margin: 15px auto;
  letter-spacing: 2px;
  font-size: 15px;
  font-family: 'Courier New', Courier, monospace;
} 

@media screen and (min-width: 1000px) {/*PC*/
  #index .main .client {
    text-align: center;
    margin: 100px auto 50px;
  } 
  
  #index .main .client a {
    text-decoration: none;
  } 
  
  #index .main .client-btn {
    background-color: #ffffff;
    color: #ff0000;
    border-radius: 80px;
    padding: 30px 35px;
    width: 400px;
    margin: auto;
    letter-spacing: 5px;
    font-size: 23px;
    font-family: 'Courier New', Courier, monospace;
  } 

  #index .main .client-btn:hover {
    background-color: #8b0043;
    color: #ffffff;
  } 
}  

/* ↑デザインを×デザインで内お客様の声（スマホ基準）↑ */


/* menuBOX */
#index .other {
  margin: 100px auto;
  padding: 20px 20px 100px 20px;
  width: 45%;
  text-align: center;
  overflow: hidden; /*子要素を内包させるため。clearプロパティの代わり*/
}

#index .other .o-menu {
  text-align: center;
  letter-spacing: 10px;
  margin: 50px 0;
  font-size: 20px;
  font-weight: bold;
  font-family: "Noto Sans JP";
  color: #000000;
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.5em; /* 線の太さ */
  text-decoration-color: #ff3366;/* 線の色 */
  text-underline-offset: -0.2em; /* 線の位置。やや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない */
}

#index .other a {
  width: auto;
  height: auto;
  text-decoration: none;
}

#index .other section {
  float: left;
  width: 25%;
  text-align: center;
  display: flex; /*box内のテキストを揃えるためのflex*/
  flex-direction: column; /*box内のテキストの高さを揃える*/
}

#index .other .clear {
  clear: both;
}

#index .other section h3 {
  font-family: "Kaisei Decol";
  margin: 20px auto 15px;
  font-size: 1vw;
  letter-spacing: 0.2vw;
  color: #3e3e3e;
  flex-grow: 1; /*box内のテキストの高さを揃える伸び率*/
}

#index .other section img {
  width: 70%;
  height: auto;
  border-radius: 18px;
  margin: 5px auto 20px auto;
  opacity: 0.4;
}

#index .other section img:hover {
  opacity: 1;
}

#index .other .s1, .s3, .s6, .s8, .s9, .s11 {
  background-color: #fffafa;
  flex-grow: 1;
}

#index .other .s2, .s4, .s5, .s7, .s10, .s12 {
  background-color: #ffeaef;
  flex-grow: 1;
}

        
  @media screen and (max-width: 1000px) {/*スマホ*/
    #index .other {
      margin: auto; /*リボンとの重なりを防ぐ分*/
      padding: 0;
      width: 90%;
      text-align: center;
      background-color: #fffff7;
      overflow: hidden; /*子要素を内包させるため。clearプロパティの代わり*/
    }

    #index .other .o-menu {
      text-align: center;
      letter-spacing: 10px;
      margin: 50px 0;
      font-size: 14px;
      font-weight: bold;
      font-family: "Noto Sans JP";
      color: #000000;
      text-decoration: underline; /* 下線 */
      text-decoration-thickness: 0.5em; /* 線の太さ */
      text-decoration-color: #ff3366bc;/* 線の色 */
      text-underline-offset: -0.2em; /* 線の位置。やや上部にする */
      text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない */
    }

    #index .other .first-floor {
      width: 100%;
      margin: 0;
      padding: 0;
    }
    

    #index .other a {
      height: auto;
      text-decoration: none;
      width: 25%;
    }

    #index .other section {
      float: left;
      text-align: center;
      display: flex; /*box内のテキストを揃えるためのflex*/
      flex-direction: column; /*box内のテキストの高さを揃える*/
    }

    #index .other section h3 {
      margin: 20px auto 15px;
      font-size: 2vw;
      letter-spacing: 1.5px;
      color: #3e3e3e;
    }
  }

/* ↓メニューイラスト動き↓ */
#index .other section .rocket {
  transform: translate(17px, 17px);
  transition: 1.4s;
}
#index .other section .rocket:hover {
  transform: translate(-17px, -17px);
  animation:hassin 0.4s linear;
}
@keyframes hassin {
    0%   { transform:translate(17px, 17px); }
    16%  { transform:translate(16px, 10px); }
    32%  { transform:translate(17px, 17px); }
    48%  { transform:translate(16px, 10px); }
    64%  { transform:translate(17px, 17px); }
    80%  { transform:translate(16px, 10px); }
    96%  { transform:translate(17px, 17px); }
    100% { transform:translate(16px, 10px); }
}


#index .other section .futaride {
  transform: translate(25px);
  transition: 4s;
}
#index .other section .futaride:hover {
  transform: translate(-25px);
}

#index .other section .yah {
  transition: 1.5s;
}
#index .other section .yah:hover {
  transform: rotateY(-720deg);
}

#index .other section .amabie {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
#index .other section .amabie:hover {
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
  -webkit-transition: 1s ease-out;
  transition: 1s ease-in-out;
}

#index .other section .shuton:hover {
  animation:shake 0.4s ease;
}
@keyframes shake {
    0%   { transform:translate(0, 0); }
    16%  { transform:translate(0, 36px); }
    32%  { transform:translate(0, -30px); }
    48%  { transform:translate(0, 24px); }
    64%  { transform:translate(0, -18px); }
    80%  { transform:translate(0, 12px); }
    96%  { transform:translate(0, -6px); }
    100% { transform:translate(0, 0); }
}

#index .other section .hyahoo {
  transition-duration: .4s;
}
#index .other section .hyahoo:hover {
  transform: scale(1.5);
}

#index .other section .simesime {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
#index .other section .simesime:hover {
  -webkit-filter: grayscale(30%);
  filter: grayscale(30%);
  animation:shake 1s ease;
}
@keyframes shake {
    0%   { transform:translate(0, 0); }
    16%  { transform:translate(0, -3px); }
    32%  { transform:translate(0, 0px); }
    48%  { transform:translate(0, -3px); }
    64%  { transform:translate(0, 0px); }
    80%  { transform:translate(0, -3px); }
    96%  { transform:translate(0, 0); }
    100% { transform:translate(0, 0); }
}

#index .other section .mokuhyouhaare {
  transform: translate(-10px, -10px);
  transition: 0.6s;
}
#index .other section .mokuhyouhaare:hover {
  transform: translate(0);
}

#index .other section .tannkenntai {
  transition-duration: .4s;
}
#index .other section .tannkenntai:hover {
  transform: scale(1.2);
}

#index .other section .tobeta {
  transform: translate(25px);
}
#index .other section .tobeta:hover {
  animation:fuwafuwa 2.2s linear;
  animation-fill-mode: forwards;
}
@keyframes fuwafuwa {
    0%   { transform:translate(25px, 0px); }
    16%  { transform:translate(20px, -5px); }
    32%  { transform:translate(15px, 0px); }
    48%  { transform:translate(10px, -5px); }
    64%  { transform:translate(5px, 0px); }
    80%  { transform:translate(0px, -5px); }
    96%  { transform:translate(-5px, 0px); }
    100% { transform:translate(-8px, -5px); }
}

#index .other section .okee {
  transform: rotate(-3deg);
  transition: 0.5s;
}
#index .other section .okee:hover {
  transform: rotate(3deg);
}

#index .other section .yataa:hover {
  animation:upup 0.8s ease;
}
@keyframes upup {
    0%   { transform:translate(0, 0); }
    32%  { transform:translate(0, -8px); }
    64%  { transform:translate(0, 0px); }
    80%  { transform:translate(0, -8px); }
    100% { transform:translate(0, 0); }
}


/* ↑メニューイラスト動き↑ */




/* ↑menuBOX↑ */

/* ↓フィロソフィーエリア↓ */
#index .main .philosophy {
  width: auto;
  margin: 100px auto;
  text-align: center;
}

.eachTextAnime span{opacity: 0;}  /*フィロソフィー１文字ずつ表示*/
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}

#index .main .philosophy .idea {
  color: #3e3e3e;
  font-family: 'Sawarabi Mincho';
  font-size: 35px;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 0.6em;
  line-height: 3.5;
  margin-bottom: 50px;
}

#index .main .philosophy .idea-text {
  font-size: 15px;
  color: #3e3e3e;
  letter-spacing: 0.6em;
  font-style: italic;
  font-weight: bold;
  line-height: 2.5;
  transition: 1.5s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}

#index .main .philosophy .idea-text.on  {
  transform: translateY(0);
  opacity: 1.0;
}

    
    @media screen and (max-width: 1000px) {/*スマホ*/
      #index .main .philosophy {
        width: 90%;
        margin: 20px auto 80px;
        text-align: center;
      }
            
      #index .main .philosophy .idea {
        color: #3e3e3e;
        font-size: 12px;
        font-style: italic;
        font-weight: bold;
        letter-spacing: 0.6em;
        line-height: 3.5;
        margin: 5px;
      }

      #index .main .philosophy .idea-text {
        width: 90%;
        margin: 30px auto;
        font-size: 10px;
        color: #3e3e3e;
        letter-spacing: 0.6em;
        font-style: italic;
        font-weight: bold;
        line-height: 2.5;
        transition: 1.5s ease-in-out;
        transform: translateY(30px);
        opacity: 0;
      }

    }

/* ↑フィロソフィーエリア↑ */

/* ↓予約・お問い合わせエリア↓ */
@media screen and (min-width: 1000px) {
  .contact-area {
    background-color: #f4f4f4;
    width: 50%; /*あとで800px相当に*/
    margin: 100px auto;
    padding: 50px 0 50px 0;
    text-align: center;
    font-family: 'Sawarabi Mincho';
  }

  .contact-area .contact {
    width: 600px;
    margin: auto auto 50px auto;
    text-align: left;
    letter-spacing: 3px;
  }

  .contact-area .contact-head {
    text-align: center;
    letter-spacing: 10px;
    margin: 50px 0;
    font-size: 14px;
    font-weight: bold;
    font-family: "Noto Sans JP";
    color: #000000;
    text-decoration: underline; /* 下線 */
    text-decoration-thickness: 0.5em; /* 線の太さ */
    text-decoration-color: #ff3366;/* 線の色 */
    text-underline-offset: -0.2em; /* 線の位置。やや上部にする */
    text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない */
  }

  .contact-area .contact-text {
    width: 90%;
    margin: auto;
  }

  .contact-area .form {
    max-width: 800px;
    text-align: left;
  }

  .contact-area .form dl dt {
    width: 80%;
    padding: 10px 0 0 50px;
    margin-left: 50px;
  }
  
  .contact-area .form dl dd {
    width: 50%;
    padding: 10px 0;
    margin-left: 100px;
  }
  
  .contact-area .form #name {
    width: 300px;
    height: 30px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }
  
  .contact-area .form #mail {
    width: 300px;
    height: 30px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }
  
  .contact-area .form #tel {
    width: 300px;
    height: 30px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }
  
  .contact-area .form #type-a {
    width: 60%;
    height: 30px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }
  .contact-area .form #type-b {
    width: 60%;
    height: 30px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }
  .contact-area .form #type-c {
    width: 60%;
    height: 30px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }
  
  .contact-area .form #date {
    width: 450px;
    height: 30px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }
  
  .contact-area .form #contents {
    width: 500px;
    max-width: 100%;
    height: 150px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }

  .contact-area .contact-attention {
    text-align: left;
    padding-left: 100px;
  }
}  

@media screen and (max-width: 1000px) {
  .contact-area {
    background-color: #f4f4f4;
    width: 90%;
    margin: 50px auto;
    padding: 10px 0;
    font-family: 'Sawarabi Mincho';
  }

  .contact-area .contact {
    width: auto;
    margin: 50px auto;
    text-align: left;
    letter-spacing: 3px;
    line-height: 2;
    font-family: 'Sawarabi Mincho';
  }

  .contact-area .contact-head {
    text-align: center;
    letter-spacing: 10px;
    margin: 50px auto;
    font-size: 14px;
    font-weight: bold;
    font-family: "Noto Sans JP";
    color: #000000;
    text-decoration: underline; /* 下線 */
    text-decoration-thickness: 0.5em; /* 線の太さ */
    text-decoration-color: #ff3366;/* 線の色 */
    text-underline-offset: -0.2em; /* 線の位置。やや上部にする */
    text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない */
  }

  .contact-area .contact-text {
    width: 90%;
    margin: auto;
    font-size: 11px;
    letter-spacing: 2px;
    line-height: 2;
  }

  .contact-area .form {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    font-family: 'Sawarabi Mincho';
    color: #444444;
  }
  
  .contact-area .form dl dt {
    width: 100%;
    padding: 10px 0 0 10px;
    text-align: left;
    line-height: 0.5;
  }
  
  .contact-area .form dl dd {
    padding: 10px 0;
    text-align: left;
  }
  
  .contact-area .form #name {
    width: 60%;
    height: 30px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }
  
  .contact-area .form #mail {
    width: 100%;
    height: 30px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }
  
  .contact-area .form #tel {
    width: 70%;
    height: 30px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }
  
  .contact-area .form #type-a {
    width: 60%;
    height: 30px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }
  .contact-area .form #type-b {
    width: 60%;
    height: 30px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }
  .contact-area .form #type-c {
    width: 60%;
    height: 30px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }
  
  .contact-area .form #date {
    width: 80%;
    height: 30px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }
  
  .contact-area .form #contents {
    width: 100%;
    height: 170px;
    border: 1px solid #000000;
    background-color: #ffffff;
  }

  .contact-area .contact-attention {
    text-align: left;
    width: auto;
    margin: 50px 10px 30px 10px;
    font-size: 10px;
    letter-spacing: 2px;
    line-height: 2;
  }
}

.contact-area .form .required:after {
  content: "*";
  color: #ff0000;
}

.contact-area .btn-area {
  text-align: center;
  margin: 10px 0 50px 0;
}

.contact-area .revois-btn {
  border: 1px solid #ff0077;
  border-radius: 3px;
  background-color: #ff0077;
  color: #ffffff;
  margin-right: 20px;
  padding: 5px 10px;
}

.contact-area .reset-btn {
  border: 1px solid #ff0077;
  border-radius: 3px;
  background-color: #ff0077;
  color: #ffffff;
  padding: 5px 10px;
}

  /* ↓confirm.php↓ */
.kakudai {
  font-size: 50px;
}

.send-btn, .back-btn {
  margin: 50px;
  padding: 10px 15px;
}

  @media screen and (min-width: 1000px) {
    .kakudai {
      font-size: 35px;
    }

    .send-btn, .back-btn {
      margin: 35px;
      padding: 10px 15px;
    }
  }

  /* ↑confirm.php↑ */
/* ↑予約・お問い合わせエリア↑ */


/* footer */
footer{
  background-color: #f9107c;
  color: rgb(255, 255, 255);
  display: inline-block;
  width: 100%;
}

footer ul {
  list-style: none;
}

footer .footer-nav-area a {
  color: #fff;
}

footer .footer-nav-area a:hover {
  color: #5f5f5f;
  font-weight: bold;
}



@media screen and (min-width: 1000px) { /*PC*/
  footer{
    position:relative;  /*TOPへボタンを下に隠す*/
    z-index: 3;  /*TOPへボタンを下に隠す*/
  }

  footer article {
    width: auto;
    margin: auto;
    float: left;
  }

  footer .footer-logo {
    margin: 30px;
    width: auto;
  }

  footer .footer-logo img {
    width: 200px;
  }

  footer .only-pc-footer-company {
    margin: 30px;
  }

  footer .only-pc-footer-company .name {
    font-size: 25px;
    font-family: 'M PLUS Rounded 1c';
    letter-spacing: 0.2em;
  }

  footer .only-pc-footer-company .name-jap {
    font-size: 14px;
    font-family: "Noto Sans JP";
    letter-spacing: 0.1em;
    margin-bottom: 15px;
  }

  footer .only-pc-footer-company .address {
    font-size: 15px;
  }

  footer .only-pc-footer-company .tel {
    font-size: 18px;
    margin-top: 3px;
  }

  footer .footer-nav-area {
    float: right;
  }

  footer .footer-nav {
    margin: 30px;
    float: left;
    letter-spacing: 0.1em;
  }

  footer .footer-nav a {
    text-decoration: none;
  }

  footer .footer-nav ul {
    margin-left: 15px;
    padding: 5px 0 0 5px;
    border-left: solid 1px #ffffff;
    font-size: 12px;
    line-height: 1.8;
  }

  footer .only-sp-footer-company {
    display: none;
  }

  footer .footer-nav .only-sp-top {
    display: none;
  }

  footer .only-sp-copyright {
    display: none;
  }

}

@media screen and (max-width: 1000px) { /*スマホ*/
  footer article {
    width: auto;
    margin: auto;
  }

  footer .footer-logo {
    margin-top: 30px;
    width: auto;
    text-align: center;
  }

  footer .footer-logo img {
    width: 150px;
    margin: auto;
  }

  footer .only-pc-footer-company {
    display: none;
  }

  footer .footer-company .address {
    display: none;
  }

  footer .footer-company .tel {
    display: none;
  }

  footer .footer-nav {
    width: 50%;
    margin: 20px 0 0 40px;
    letter-spacing: 0.1em;
  }

  footer .footer-nav a {
    text-decoration: none;
    font-size: 12px;
  }

  footer .footer-nav ul {
    margin-left: 15px;
    padding: 5px 0 0 5px;
    border-left: solid 1px #ffffff;
    font-size: 9px;
    line-height: 2;
  }

  footer .only-sp-footer-company {
    margin: 50px 20px 10px 20px;
    padding: 15px 0 15px 5px;
    border-top: solid 1px #ffffff;
    border-bottom: solid 1px #ffffff;
  }

  footer .only-sp-footer-company .name {
    font-size: 15px;
    font-family: 'M PLUS Rounded 1c';
    letter-spacing: 0.3em;
    margin-bottom: 5px;
  }

  footer .only-sp-footer-company .address {
    font-size: 11px;
    letter-spacing: 2px;
  }

  footer .only-sp-footer-company .tel {
    font-size: 14px;
    margin-top: 8px;
    letter-spacing: 2px;
  }

  footer .only-sp-copyright {
    text-align: center;
    font-size: 8px;
    letter-spacing: 1px;
    margin-bottom: 15px;
  }

}

/* footer */





/* ↓下層ページ見出し↓ */
@media screen and (max-width: 1000px) { /*スマホ*/
  .ul-main {
    text-align:center;
    position:relative;
  }

  .ul-main h1 {
    color: #ffffff;
    text-shadow: 2px 2px 20px #676767d5;
    white-space: nowrap;
    font-family: "Aoboshi";
    max-width: auto;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
  }

  .ul-main .top-img {
    height: 80vh;
    width: auto;
    position: relative;
    z-index: 1;
    background-image: url(../images/ul-top-tttv02.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
  }

  #adpr .ul-main .top-img {
    height: 90vh;
  }

  .ul-main .top-img img {
    position:relative;
    z-index: 1;
    height: 80vh;
    width: auto;
    display: flex;
  }

  .ul-main .top-img p {
    color: rgba(253, 234, 255, 0.644);
    text-shadow: 15px 2px 20px #fff4f4;
    font-family: "Aoboshi";
    font-weight: bolder;
    white-space: nowrap;  /*文字を改行せずに横幅に合わせる*/
    overflow: hidden;
    font-size: 100px;
    line-height: 1.1em;
    margin-top: 20px;
    writing-mode: vertical-rl;
  }

  #adpr .ul-main .top-img img {
    position:relative;
    z-index: 1;
    height: 90vh;
    width: auto;
    display: flex;
  }

  .ul-main .ul-site-nav {
    height: 20vh;
    position:relative;  /*TOPへボタンを下に隠す*/
    z-index: 1;  /*TOPへボタンを下に隠す*/
  }

  #adpr .ul-main .ul-site-nav {
    height: 10vh;
  }

  .ul-main .ul-site-nav section {
    float: left;
    width: 33.3%;
    height: 50%;
    border: solid 1px #ffffff;
    box-sizing: border-box; 
    display: flex;  
    justify-content: center;
    align-items: center;
  }

  #adpr .ul-main .ul-site-nav section {
    width: 25%;
    height: 100%;
  }

  .ul-main .ul-site-nav .nav-icon  {
    text-decoration: none;
    font-size: 12px;
    background-color: #ff0077; 
    color: #ffffff; 
  }

  .ul-main .ul-site-nav a:hover {
    color: #ffffff; 
    font-weight: bold;
  }

  .ul-main .ul-site-nav section:hover {
    background-color: #e4006a; 
    color: #ffffff; 
    font-weight: bold;
  }
}


@media screen and (min-width: 1000px) { /*PC*/
  .ul-main {
    text-align:center;
    position:relative;
  }

  .ul-main h1 {
    color: #ffffff;
    text-shadow: 2px 2px 20px #676767d5;
    white-space: nowrap;
    font-family: "Aoboshi";
    font-size: 40px;
    max-width: auto;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
  }

  .ul-main .top-img {
    height: 90vh;
    width: auto;
    display: flex;
    position:relative;
    z-index: 1;
    background-image: url(../images/ul-top-tttv02.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
  }

  #adpr .ul-main .top-img {
    height: 90vh;
  }

  .ul-main .top-img img {
    position:relative;
    z-index: 1;
    height: 100vh;
    width: auto;
    display: flex;
  }

  .ul-main .top-img p {
    color: rgba(253, 234, 255, 0.644);
    text-shadow: 15px 2px 20px #fff4f4;
    font-family: "Aoboshi";
    font-weight: bolder;
    white-space: nowrap;  /*文字を改行せずに横幅に合わせる*/
    overflow: hidden;
    font-size: 250px;
    line-height: 1.1em;
    margin-top: 50px;
    writing-mode: vertical-rl;
  }

  #adpr .ul-main .top-img img {
    position:relative;
    z-index: 1;
    height: 100vh;
    width: auto;
    display: flex;
  }

  .ul-main .ul-site-nav {
    height: 10vh;
    position:relative;  /*TOPへボタンを下に隠す*/
    z-index: 1;  /*TOPへボタンを下に隠す*/
  }

  #adpr .ul-main .ul-site-nav {
    height: 10vh;
  }

  .ul-main .ul-site-nav section {
    float: left;
    width: 16.6%;
    height: 100%;
    border: solid 1px #ffffff;
    box-sizing: border-box; 
    display: flex;  
    justify-content: center;
    align-items: center;
  }

  #adpr .ul-main .ul-site-nav section {
    width: 25%;
    height: 100%;
  }

  .ul-main .ul-site-nav .nav-icon  {
    text-decoration: none;
    font-size: 20px;
    background-color: #ff0077; 
    color: #ffffff; 
  }

  .ul-main .ul-site-nav a:hover {
    color: #ffffff; 
    font-weight: bold;
  }

  .ul-main .ul-site-nav section:hover {
    background-color: #e4006a; 
    color: #ffffff; 
    font-weight: bold;
  }
}
/* ↑下層ページ見出し↑ */


/* ↓websiteページ（スマホ基準）↓ */
#website-flow {
  padding: 50px 20px;  /*ページ内リンクの位置を合わせる*/
  margin: 0;
  background-color: #fffff7;
}

.ul-main h2 {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 40px;
  text-align: center;
  letter-spacing: 10px;
  font-size: 20px;
  font-weight: bold;
  font-family: "Noto Sans JP";
  color: #000000;
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.5em; /* 線の太さ */
  text-decoration-color: #ff0077;/* 線の色 */
  text-underline-offset: 0.2em; /* 線の位置。やや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない */
}

#website .ul-main .red {
  letter-spacing: 4px;
  color: #ff3366;
  font-family: "Noto Sans JP";
  text-decoration-color: #f4ffb7;/* 線の色 */
}

#website-flow section {
  padding: 10px 5px;
  margin: 10px 10px;
  border-radius: 10px;
  box-shadow: 1px 1px 10px 1px #bfbbff76;
  background-color: #fff;
}

#website-flow .dawn-triangle {
  text-align: center;
  color: #bfbbff;
}

#website-flow h3 {
  font-size: 11px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: #824500;
  letter-spacing: 2px;
  text-decoration: underline dotted 2px #ff7b00;  
  text-underline-offset: 0.3em;
  padding-left: 15px;
  padding-bottom: 10px;
}

#website-flow section p {
  font-size: 13px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  padding: 0 10px;
  line-height: 1.4;
  letter-spacing: 1.2px;
}

#website #price-info {
  padding: 50px 20px;  /*ページ内リンクの位置を合わせる*/
  margin: 0;
  background-color: #ffffff;
}

#website #price-info .area-title {
  margin: 80px 60px 0;
  text-align: center;
  letter-spacing: 5px;
  font-weight: 100;
  font-size: 15px;
  border-bottom: solid 1px #ffa238;
}

#website #price-info table {
  border-collapse: collapse;
  width: 100%;
  padding-bottom: 10px;
  color: #381e00;
  margin: 10px 0;
}

#website #price-info table .table-first {
  border-bottom: solid 1px #b7b7b7;
}

#website #price-info table .table-second {
  border-bottom: solid 1px #b7b7b7;
}

#website #price-info table .table-third {
  border-bottom: solid 1px #b7b7b7;
}

#website #price-info table .table-fourth {
  border-bottom: solid 1px #b7b7b7;
}

#website #price-info table tr {
  padding-top: 20px;
  padding-bottom: 10px;
}

#website #price-info table th {
  padding-top: 20px;
  padding-bottom: 10px;
  font-size: 12px;
}

#website #price-info table td {
  padding-top: 20px;
  padding-bottom: 10px;
  font-size: 12px;
}

#website #price-info .price-attention {
  font-family: "Sawarabi Mincho";
  font-size: 11px;
  padding-top: 5px;
  letter-spacing: 1px;
}

#website #price-info .function-area .function-text {
  margin: 20px;
  font-size: 11px;
  letter-spacing: 2px;
}

#website #price-info .function-area .function-text .plan-all {
  margin-bottom: 10px;
}


#website #price-info .function-area .function-text .title-s {
  font-size: 10px;
  line-height: 3;
}

#website #price-info .admin-area {
  padding-top: 5px; /*indexページattentionからリンクの位置を合わせる*/
}

#website #price-info .admin-area .admin-text {
  margin-top: 20px;
  font-size: 12px;
}

#website #price-info .admin-area .admin-text .admin-title {
  background-color: #fff7e6;
  padding: 2px;
}

#website #price-info .admin-area .admin-text .admin-price {
  text-align: right;

}

#website #price-info .admin-area .admin-text .admin-mon-total-title {
  color: #381e00;
  font-weight: bold;
  background-color: #fff7e6;
  border-bottom: solid 1px #ffffff;
  padding: 2px;

}

#website #price-info .admin-area .admin-text .admin-mon-total {
  color: #381e00;
  font-weight: bold;
  background-color: #fff7e6;
  text-align: right;
  padding: 1px;
}

#website #price-info .subscription {
  text-align: center;
  font-size: 14px;
  padding-top: 3px;
  letter-spacing: 2px;
}

#website #price-info .subscription-attention {
  font-family: "Sawarabi Mincho";
  font-size: 10px;
  padding-top: 5px;
  letter-spacing: 1px;
}

#website #seo {
  padding: 50px 20px;
  margin: 0;
  background-color: #ffffff;
  color: #1f3732;
  border-bottom: solid 1px #000000;
}

#seo section {
  margin: 30px 0;
  letter-spacing: 1px;
  font-size: 15px;
  font-family: "Noto Sans JP";
}

#website #seo section h3 {
  letter-spacing: 2px;
  font-size: 15px;
  margin-bottom: 5px;
}

#website #seo section .rhombus {
  color: #ffba3a;
}

#website #welcome-hp {
  text-align: center;
  padding: 20px 20px;
  margin: 0;
  color: #1f3732;
}

#website #welcome-hp img {
  width: 200px;
}

#website #welcome-hp p {
  text-align: left;
  margin-top: 10px;
  letter-spacing: 1px;
  font-size: 15px;
  font-family: "Noto Sans JP";
}

#website #exhibition-event-hp {
  text-align: center;
  padding: 20px 20px;
  margin: 0;
  color: #1f3732;
}

#website #exhibition-event-hp img {
  width: 200px;
}

#website #exhibition-event-hp p {
  text-align: left;
  margin-top: 10px;
  letter-spacing: 1px;
  font-size: 15px;
  font-family: "Noto Sans JP";
}

#website #artist-hp {
  text-align: center;
  padding: 20px;
  margin: 0 0 50px;
  color: #1f3732;
}

#website #artist-hp img {
  width: 200px;
}

#website #artist-hp p {
  text-align: left;
  margin-top: 10px;
  letter-spacing: 1px;
  font-size: 15px;
  font-family: "Noto Sans JP";
}

@media screen and (min-width: 1000px) { /*PC*/
  #website .only-pc-padding {
    width: 60%;
    margin: auto;
  }

  #website-flow {
    padding: 10px 150px;
  }

  #website-flow h3 {
    font-size: 17px;
  }

  #website #price-info .table-area {
    padding: 10px 100px;
  }

  #website #price-info .function-area {
    padding: 10px 100px;
  }

  #website #price-info .admin-area {
    padding: 10px 100px;
  }

  #website #seo {
    padding: 10px 100px;
  }

  #website #welcome-hp {
    padding: 10px 100px;
  }

  #website #exhibition-event-hp {
    padding: 10px 100px;
  }

  #website #artist-hp {
    padding: 10px 100px;
  }
}
/* ↑websiteページ↑ */

/* ↓各ページ共通お問い合わせ（スマホ基準）↓ */
#website .to-form-area {
  text-align: center;
  padding: 40px 0 70px;
  background-color: #e7fbff;
}

#print .to-form-area {
  text-align: center;
  padding: 40px 0 70px;
  background-color: #e7fbff;
}

#adpr .to-form-area {
  text-align: center;
  padding: 40px 0 70px;
  background-color: #e7fbff;
}

.to-form-text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  margin: 20px 0;
  color: #462600;
}

.to-form-btn {
  margin-top: 30px;
}

.to-form-btn a {
  text-decoration: none;
  background-color: #ff8800;
  padding: 10px 25px;
  border-radius: 30px;
}

.to-form-btn a:hover {
  background-color: #ffba3a;
}

@media screen and (min-width: 1000px) { /*PC*/
  #website .to-form-area, #print .to-form-area, #adpr .to-form-area {
    margin: 0 100px;
    background-color: #ffffff;
  }
}
/* ↑各ページ共通お問い合わせ↑ */

/* ↓印刷物ぺージ（スマホ基準）↓ */
#print .print-img-area {
  text-align: center;
}

#print .print-text-area {
  width: auto;
  margin: 20px;
}

#flyer, #goods, #album {
  padding-top: 30px;
  padding-bottom: 10px;
  background-color: #fff1f1;
}

#directmail, #card, #print-other {
  background-color: #ffffff;
  padding-top: 30px;
  padding-bottom: 50px;
}

#print .info {
  font-family: "Zen Kaku Gothic New";
  margin-bottom: 50px;
}

#print .info .uper {
  font-size: 18px;
  margin-top: 30px;
}

#print .info .uper .ribbon {
  border: solid 3px rgba(255, 0, 195, 0.462);
  background-color: white;
  padding: 2px 8px;
  letter-spacing: 0.1em;
}

#print .info .intro .ribbon {
  text-decoration: underline; /* 下線 */
  text-decoration-thickness: 0.6em; /* 線の太さ */
  text-decoration-color: #ffdd0089;/* 線の色 */
  text-underline-offset: -0.4em; /* 線の位置。やや上部にする */
  text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない */
}

#print .table-title {
  font-weight: bold;
  text-decoration: underline 1px #ff7b00;  
  text-underline-offset: 0.3em;
  font-size: small;
}

#print table {
  border-collapse: collapse;
  width: 100%;
  padding-bottom: 10px;
  color: #381e00;
  margin: 10px 0 30px;
  text-align: left;
}

#print table .table-floor {
  border-bottom: solid 1px #871818;
}

#print table tr {
  padding-top: 20px;
  padding-bottom: 10px;
}

#print table th {
  padding-top: 20px;
  padding-bottom: 10px;
  font-size: 12px;
}

#print table td {
  padding-top: 20px;
  padding-bottom: 10px;
  font-size: 12px;
}

#print .print-attention {
  border: solid 1px #000000;
  width: 95%;
  margin: 0 auto 0px;
  padding: 15px 20px;
  font-size: 12px;
}

#print .to-form-area {
  background-color: #ffffff;
}

@media screen and (min-width: 1000px) { /*PC*/
  #print .only-pc-padding {
    width: 60%;
    margin: auto;
  }

  #flyer, #goods, #album, #directmail, #card, #print-other {
    background-color: #ffffff;
  }

  #print .print-attention {
    border: solid 1px #000000;
    width: 80%;
    margin: auto;
    padding: 15px 20px;
    font-size: 15px;
  }
  
}
/* ↑印刷物ページ↑ */

/* ↓広告代理（スマホ基準）↓ */
#adpr #googlemap, #cloudfunding, #logo, #photo {
  padding: 30px;  /*ページ内リンクの位置を合わせる*/
  margin: auto;
  width: auto;
}

#cloudfunding, #photo {
  background-color: #ffffff;
}

#googlemap, #logo {
  background-color: #fff5f5;
}

#adpr h2 {
  letter-spacing: 0.1em;
}

#adpr .img-area {
  text-align: center;
}

#adpr .img-area img {
  width: 150px;
  margin: 20px 0 10px;
}

#adpr .text-area {
  width: auto;
  margin: 40px 20px;
  font-size: 20px;
}

@media screen and (min-width: 1000px) { /*PC*/
  #adpr .only-pc-padding {
    width: 60%;
    margin: auto;
  }

  #cloudfunding, #photo, #googlemap, #logo {
    background-color: #ffffff;
  }

  #adpr .text-area {
    width: fit-content;  /*widthを文字幅に合わせる*/
    margin: auto;
  }
}
/* ↑広告代理↑ */

/* ↓アバウト（スマホ基準）↓ */

#about .ul-main .top-img {
  height: 100vh;
}

#about .ul-main .top-img img {
  height: 100vh;
}

#about .ul-main h2 {
  text-align: left;
  padding-left: 20px;
}

#about #company h2 {
  letter-spacing: 0.2em;
}

#about .company-area, .history-area, .profile-area  {
  margin: 80px 20px;
  width: auto;
}

#about .table-title {
  letter-spacing: 0.2em;
  font-size: 12px;
  font-weight: bold;
  text-decoration: underline 1px #484848;
  color: #484848;
}

#about table {
  font-size: 12px;
  font-family: "Sawarabi Mincho";
}

#about table tr {
  text-align: left;
  line-height: 3em;
}

#about table th {
  white-space: nowrap;  /*文字を改行せずに横幅に合わせる*/
  font-weight: light;
  font-family: "Murecho", sans-serif;
  font-size: 10px;
  color: #8d8d8d;
  vertical-align: text-top;
}

#about table td {
  padding-left: 10px;
  font-family: "Murecho", sans-serif;
  font-size: 10px;
  line-height: 2em;
  vertical-align: text-top;
}

#about .history-area table a {
  color: #0d009d;
}

#about .profile-area img {
  width: 100%;
}

#about .profile-area p {
  font-size: 10px;
}

@media screen and (min-width: 1000px) { /*PC*/
  #about .only-pc-padding {
    width: 60%;
    margin: auto;
  }
  #about .table-title {
    font-size: 15px;
  }
  
  #about table {
    font-size: 15px;
  }
  
  #about table th {
    font-size: 13px;
  }
  
  #about table td {
    font-size: 13px;
  }
  
  #about .profile-area img {
    width: 60%;
  }
  
  #about .profile-area p {
    font-size: 13px;
    font-weight: bold;
  }
}
/* ↑アバウト↑ */

/* ↓アクセス↓ */
#access .ul-main .top-img {
  height: 100vh;
}

#access .ul-main .top-img img {
  height: 100vh;
}

#access .ul-main h2 {
  text-align: left;
  padding-left: 20px;
}

#access .ul-main article {
  margin: 20px;
}

#access .access-info {
  font-family: "Sawarabi Mincho";
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1.5;
  margin-top: 50px;
}

#access .sakuramati {
  border-bottom: solid 1px #000000;
}

#access .conference-room{
  font-size: 15px;
  letter-spacing: 2px;
  margin-top: 50px;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-decoration-color: #ff9900;
  text-underline-offset: 0.4em;
  text-decoration-skip-ink: none;
}

#access .conference-room-address {
  font-size: 12px;
  margin-top: 5px;
  margin-bottom: 20px;
}

#access .conference-room-transportation {
  font-size: 12px;
  margin-top: 14px;
  font-family: "Noto Sans JP";
}

#access .for-right {
  float: right;
  margin-bottom: 20px;
}

#access .conference-room-map {
  clear: both;
  border: double 2px #ff0077;
  margin: 50px auto;
  width: auto;
  height: 200px;
}

#access iframe {
  margin: auto;
  width: 100%;
  height: 100%;
}

  @media screen and (min-width: 1000px) { /*PC*/
    #access .ul-main article {
      width: 60%;
      margin: auto;
    }
    
    #access .conference-room-map {
      width: auto;
      height: 400px;
    }
  }


/* ↑アクセス↑ */

/* ↓コンタクト↓ */
#contact .ul-main .top-img {
  height: 100vh;
}

#contact .ul-main .top-img img {
  height: 100vh;
}

#contact .back-btn {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1em;
}

#contact .back-btn a {
  color: #606060;
  font-family: "Noto Sans JP";
  text-underline-offset: 0.4em;
}
/* ↑コンタクト↑ */

/* ↓お客様の声（スマホ基準）↓ */
#client .ul-main .top-img {
  height: 100vh;
}

#client .ul-main .top-img img {
  height: 100vh;
}

#client h2 {
  letter-spacing: 0.2em;
}

#client .client-voice {
  margin: 50px 10px;
  border: solid 1px #000000;
  padding: 20px;
  font-family: "Noto Sans JP";
}

#client .client-voice .mana-name {
  width: 90%;
  margin-bottom: 10px;
}

#client .client-voice p {
  font-size: 12px;
  letter-spacing: 1.4px;
  line-height: 1.8;
}

#client .client-voice .mana-hp {
  width: 90%;
  margin: 60px auto 30px auto;
}

#client .back-btn a {
  color: #606060;
  font-family: "Noto Sans JP";
  text-underline-offset: 0.4em;
}

@media screen and (max-width: 1000px) { /*スマホ*/
  #client .presentation-pc {
    display: none;
  }

  #client .presentation-sp {
    width: 100%;
    margin: 50px auto;
    text-align: center;
  }

  #client .presentation-sp img {
    margin: auto;
    width: 90%;
  }
  }
  #client .back-btn {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1em;
}

@media screen and (min-width: 1000px) { /*PC*/
  #client .client-voice {
    margin: 80px auto;
    border: solid 1px #000000;
    padding: 30px;
    width: 800px;
  }
  
  #client .client-voice .mana-name {
    width: 400px;
    margin-bottom: 10px;
  }
  
  #client .client-voice p {
    font-size: 15px;
    letter-spacing: 1.8px;
    line-height: 1.8;
    text-align: left;
  }

  #client .client-voice .mana-hp {
    width: 70%;
  }
  
  #client .presentation-sp {
    display: none;
  }

  #client .presentation-pc {
    width: 900px;
    margin: 80px auto;
  }

  #client .presentation-pc img {
    margin: auto;
    width: 100%;
  }
}
/* ↑お客様の声↑ */


#index .about-area .dela{
  font-family: "Dela Gothic One";
  }
  #index .about-area .kaisei{
  font-family: "Kaisei Decol";
  }
  #index .about-area .noto{
  font-family: "Noto Sans JP";
  }
  #index .about-area .rampart{
  font-family: "Rampart One";
  }
  #index .about-area .sawarabi{
  font-family: "Sawarabi Mincho";
  }
  #index .about-area .shippori{
  font-family: "Shippori Antique";
  }
  #index .about-area .mplus{
    font-family: "M PLUS Rounded 1c";
  }
  #index .about-area .mplus{
    font-family: "Aoboshi";
  }
  #index .about-area .kokoro{
    font-family: "kokoro";
  }
  #index .about-area .zenkaku{
    font-family: "Zen Kaku Gothic New";
  }


/* ↓こども絵画発見終了しました画面↓ */
  
@media screen and (max-width: 1000px) { /*スマホ*/
  #art-fin .ul-main .top-img {
    background-image: url(../images/informel-art-top.png);
  }
}
@media screen and (min-width: 1000px) { /*PC*/
  #art-fin .ul-main .top-img {
    background-image: url(../images/informel-art-top.png);
  }
}