/*e-amusementサイトテンプレート*/
header,footer,header#id_nav_menu_1{position:relative !important;}
header#id_nav_menu_1{background-color:#fff;}
#wrapper{position:relative !important;}
#container{background:#fff;}

header#id_nav_menu_1 {z-index:9999 !important;}
footer               {z-index:10 !important;}

/*
================================================================================================================
RESET
================================================================================================================
*/
*{padding:0; margin:0; border: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;}

html{width:100%; height:100%; overflow-wrap:break-word}
body{
min-width:320px !important;
background:#fff !important;
margin:0 auto;
font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{display:none;}
a{outline:none;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
a img{transition:opacity .3s ease;}
img{padding:0; margin:0; border:0; vertical-align:bottom;}
ul{margin:0; padding:0; border:0;}
li{list-style:none;}
strong,em,b{font-weight:700; font-style:normal;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}

.no-show{display:none;}/*タブ切替*/

/*
================================================================================================================
COMMON
================================================================================================================
*/
#id_ea_common_content,
#header,
#header-inner,
#main,
#main-inner,
#project-inner{position:relative; width:100%; margin:0 auto;}

#header-inner,
#main-inner,
#project-inner{max-width:1760px;}

#id_ea_common_content{color:#ff6000; font-family:"Zen Kaku Gothic New", sans-serif; font-size:clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);/*18-14*/}

/*
=========================
ヘッダー
=========================
*/
#header{position:relative; background:#fffeee; border-bottom:4px solid; padding:0 80px; z-index:10;}
#header.fix{position:fixed; top:0; left:0;}
#header-inner{
  display:flex;
  width:100%;
  height:80px;
  border-left:4px solid;
  border-right:4px solid;
  justify-content:center;
  align-items:center;
  z-index:10;
  .title{
    display:flex; letter-spacing:4px; padding:0 5px;
    li{
      > a{
        color:#ff6000; transition:color .2s ease;
        &:hover{color:#00c690;}
      }
      &:nth-child(1)::after{display:inline-block; content:"/"; color:#ff6000; margin:0 20px;}
    }
  }
}
@media screen and (max-width:800px){
#header{padding:0 40px;}
  #header-inner{
    .title{
      display:block; text-align:center;
      li:nth-child(1){font-weight:900;}
      li:nth-child(1)::after{display:none;}
      li:nth-child(2){font-size:13px; margin-top:5px;}
    }
  }
}
@media screen and (max-width:640px){
#header{padding:0;}
#header-inner{border:none;}}
@media screen and (max-width:480px){#header{border-bottom:2px solid;}}

/*
=========================
TOPメニュー
=========================
*/
#menu{
  width:100%;
  .inner{
    width:100%; font-size:22px; 
    a{
      display:block; color:#ff6000;
       p{
         display:inline-block; position:relative;
         &::after{
           display:block;
           content:"";
           position:absolute;
           left:-10px;
           bottom:-15px;
           width:0;
           height:10px;
           background:#ff6000;
           opacity:0;
           transform-origin:left;
           transition:all .2s ease;
         }
       }
       &:hover,&.selected{
         p::after{width:calc(100% + 20px); opacity:1;}
       }
    }
  }
}
@media screen and (min-width:801px){
  #btn-sp{display:none;}
  #menu{
    height:100%; padding:0 20px;
   .inner{
     display:flex; height:100%; justify-content:flex-end; align-items:center;
     a{
       & + a{
         &::before{display:inline-block; content:":"; margin:0 20px;}
       }
     }
   }
  }
}
@media screen and (max-width:800px){
  #header.menu-top{pointer-events:none;}
  #btn-sp{
    position:absolute; top:0; right:0; width:80px; height:80px; background:#fffddb; border-left:4px solid; transition:background .35s ease-in-out; cursor:pointer; z-index:10; pointer-events:auto;
    span{
      display:block;
      position:absolute;
      left:20%;
      height:6px;
      width:60%;
      background:#ff6000;
      transition:.35s ease-in-out;
      &:nth-child(1){top:25px;}
      &:nth-child(2){top:calc(50% - 3px);}
      &:nth-child(3){top:49px;}
    }
    &:hover{background:#b6ffda;}
    &.open{
      background:#b6ffda;
      span{
        &:nth-child(1){top:calc(50% - 1.5px); transform:rotate(315deg);}
        &:nth-child(2){width:0; left:50%;}
        &:nth-child(3){top:calc(50% - 1.5px); transform:rotate(-315deg);}
      }
    }
  }
  #menu{
    position:relative; z-index:5; pointer-events:none;
    .inner{
     background:#fffeee; transform:translateY(-216px); padding:20px 0; border-bottom:4px solid; opacity:0; transition:all .2s ease;
      a{
        text-align:center; background:#fffeee; padding:20px; transition:all .2s ease; pointer-events:auto;
        p::after{bottom:-10px; height:5px;}
      }
      &.open{transform:translateY(216px); opacity:1;}
    }
  }
}
@media screen and (max-width:480px){
  #header.menu-top{height:50px;}
  #btn-sp{
    width:50px; height:50px; border-left:2px solid; border-bottom:2px solid;
    span{
      height:3px;
      &:nth-child(1){top:15px;}
      &:nth-child(2){top:calc(50% - 1.5px);}
      &:nth-child(3){top:31px;}
    }
  }
  #menu{
    .inner{font-size:18px; border-bottom:2px solid; transform:translateY(-121px);
      a{padding:10px;}
      &.open{transform:translateY(131px);}
    }
  }
}

/*
=========================
メイン
=========================
*/
#main{background:#fffeee; padding:0 80px 80px;}
@media screen and (max-width:800px){#main{padding:0 40px 40px;}}
@media screen and (max-width:640px){#main{padding:0;}}

#main img{width:100%;}

#main-inner{background-image:url(../img/common/bg.png); border:4px solid; border-top:none; /*padding:0 0 60px;*/ margin:0 auto;}
@media screen and (min-width:981px){#main-inner{min-height:calc(100vh - 369px);}}
@media screen and (max-width:980px){#main-inner{min-height:calc(100vh - 417px);}}
@media screen and (max-width:640px){#main-inner{border:none;}}
/*@media screen and (max-width:480px){#main-inner{padding:0 0 30px;}}*/

/*TOP以外*/
#project-inner{
  color:#ff6000; background:#ffeab9; border:4px solid; border-top:none;
  #main-inner{max-width:880px; border-bottom:none;}
}
@media screen and (max-width:1084px){
  #project-inner #main-inner{border-left:none; border-right:none;}
}
@media screen and (max-width:640px){
  #project-inner{
    border:none;
    #main-inner{max-width:unset;}
  }
}

/*
=========================
大見出し
=========================
*/
.text{
  display:block;
  position:relative;
  width:100%;
  color:#fff;
  background:#ff6000;
  font-size:clamp(1.625rem, 0.852rem + 3.86vw, 3.75rem);/*60-26*/
  font-weight:900;
  line-height:100%;
  text-align:center;
  border-bottom:4px solid #ff6000;
  padding:30px 5px;
  &.arrow{
    &::before,&::after{
      display:block;
      content:"";
      position:absolute;
      width:0;
      height:0;
      border-style:solid;
      border-bottom:0;
    }
    &::before{
      left:calc(50% - 36px);
      bottom:-36px;
      border-right:36px solid transparent;
      border-left:36px solid transparent;
      border-top:36px solid #ff6000;
    }
    &::after{
      left:calc(50% - 30px);
      bottom:-30px;
      border-right:30px solid transparent;
      border-left:30px solid transparent;
      border-top:30px solid #ff6000;
    }
  }
  &.small{
    font-size:clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);/*36-24*/ line-height:2rem;
    br{display:none;}
  }
  &.yellow{
    color:#ff6000; background:#fffddb;
    &.arrow{
      &::after{border-top:30px solid #fffddb;}
    }
  }
}
@media screen and (max-width:800px){.text.small br{display:block;}}
@media screen and (max-width:480px){
  .text{
    padding:20px 5px; border-bottom:2px solid #ff6000;
    &.arrow{
      &::before{
        left:calc(50% - 32px);
        bottom:-33px;
        border-right:32px solid transparent;
        border-left:32px solid transparent;
        border-top:32px solid #ff6000;
      }
    }
  }
}

/*
=========================
テキストアニメーション
=========================
*/
#marquee{
  position:relative;
  color:#fff;
  background:#ff6000;
  font-family:"Pixelify Sans", sans-serif;
  font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);/*26-16*/
  white-space:nowrap;
  padding:10px 0;
  overflow:hidden;
  pointer-events:none;
  ul{display:flex; gap:20px; animation:text-loop 30s linear infinite;}
}
@media screen and (max-width:480px){#marquee{padding:5px 0;}}

@keyframes text-loop{
  from{transform:translateX(0%);}
  to{transform:translateX(-50%);}
}

/*
=========================
汎用入れ子
=========================
*/
.box{
  position:relative;
  h2{
    display:block;
    position:relative;
    background:#fffddb;
    border-bottom:4px solid;
    padding:80px 0 10px;
    p{
      position:relative;
      font-family:"Archivo Black", sans-serif;
      font-size:clamp(2.875rem, 1.966rem + 4.55vw, 5.375rem);/*86-46*/
      line-height:90%;
      padding-left:82px;
      &::before{
        display:block;
        content:"";
        position:absolute;
        top:0;
        left:10px;
        width:62px;
        height:100%;
        /*aspect-ratio:1 / 1;*/
        background-image:url(../img/top/icn_head.png);
        background-size:100% auto;
        background-position:center;
        background-repeat:no-repeat;
      }
    }
  }
  h3{
    display:block;
    font-size:clamp(0.75rem, 0.568rem + 0.91vw, 1.25rem);/*20-12*/
    background:#feff9f;
    border-bottom:4px solid;
    padding:10px;
  }
  .inner{position:relative; padding:50px;}
  & + .box{border-top:4px solid;}
  &.white{
    color:#3b3533; background:#fff;
    .inner{line-height:2rem; padding:50px 100px;}
  }
  .link-text{
    color:#00c690; text-decoration:underline;
    &:hover{text-decoration:none;}
  }
}
@media screen and (max-width:1000px){
  .box h2 p{
    padding-left:calc(7% + 20px);
    &::before{width:7%;}
  }
}
@media screen and (max-width:640px){
  .box{
    .inner{padding:30px 15px;}
    &.white .inner{line-height:1.5rem; padding:30px;}
  }
}
@media screen and (max-width:480px){
  .box{
    h2{
      border-bottom:2px solid;  padding:50px 0 10px;
      p{
        padding-left:calc(10% + 20px);
        &::before{width:10%;}
      }
    }
    h3{border-bottom:2px solid;}
    & + .box{border-top:2px solid;}
    &.white .inner{padding:30px 15px;}
  }
}

/*TOP以外*/
#project-inner{
  .box{
    h2{
      p{
        font-family:"Zen Kaku Gothic New", sans-serif;
        font-size:clamp(1.625rem, 1.193rem + 2.16vw, 2.813rem);/*45-26*/
        font-weight:900;
        &::before{
          top:unset;
          bottom:-10px;
          left:0;
          height:150%;
          background:#ff6000 !important;
        }
      }
    }
  }
}
@media screen and (max-width:480px){
  #project-inner{
    .box{
      h2{
        p{
          padding-left:calc(12% + 10px);
          &::before{width:12%; height:170%;}
        }
      }
    }
  }
}

/*
=========================
ボタン
=========================
*/
.btn{
  display:block;
  position:relative;
  width:100%;
  max-width:640px;
  color:#ff6000;
  background:#fff;
  font-size:clamp(1rem, 0.682rem + 1.59vw, 1.875rem);/*30-16*/
  text-align:center;
  border:3px solid #ff6000;
  border-radius:10px;
  box-shadow:0 10px 0 #ff6000;
  padding:40px 20px;
  margin:0 auto;
  transition:all .2s ease;
  cursor:pointer;
  &:disabled{background:#dfdfdf; filter:grayscale(100%); pointer-events:none; opacity:.7;}
  &:hover{background:#b6ffda; box-shadow:0 0 0 #ff6000; transform:translateY(10px);}
  & + .btn{margin-top:40px;}
  &.back{
    width:90%; max-width:300px; font-size:clamp(0.875rem, 0.693rem + 0.91vw, 1.375rem);/*22-14*/ border-radius:40px; box-shadow:none; padding:20px 0 20px 20px; margin:40px auto 0;
    &:hover{color:#fff; background:#ff6000; transform:translateY(0);}
    &::after{
      display:block;
      content:"";
      position:absolute;
      top:calc(50% - 8px);
      left:20px;
      width:16px;
      height:16px;
      border-right:3px solid;
      border-bottom:3px solid;
      transform:rotate(135deg);
    }
  }
  &.submit{
    max-width:480px; font-weight:900; padding:20px; margin:40px auto 0;
    &:hover{color:#fff; background:#ff6000;}
  }
}
@media screen and (max-width:480px){
  .btn{
    padding:20px; border:2px solid #ff6000; box-shadow:0 5px 0 #ff6000;
    &:hover{transform:translateY(5px);}
    &.back{padding:10px 0;}
    &.submit{padding:10px; margin-top:20px;}
  }
}

/*
=========================
リスト
=========================
*/
.list.small{font-size:12px;}
@media screen and (max-width:640px){.list.small{font-size:11px;}}

/*リスト関連*/
ul.list{width:100%; text-align:left; margin:0 auto;}
ul.list > li{display:block; position:relative; padding-left:18px; line-height:150%;}
ul.list > li + li{margin-top:5px;}
ul.list > li::before{display:block; position:absolute; top:0; left:0;}
ul.list > li > a{color:#ff6a7a; text-decoration:underline;}
ul.list > li > a:hover{text-decoration:none;}

ul.list.ast{font-family:'Noto Sans JP', sans-serif;}

ul.list.dot > li::before{content:""; top:10px; left:4px; width:5px; height:5px; background:#000; border-radius:50%;}
ul.list.ast > li::before{content:"※";}
ul.list.sq > li::before{content:"■";}

ul.list.num > li:first-child::before{content:"1.";}
ul.list.num > li:nth-child(2)::before{content:"2.";}
ul.list.num > li:nth-child(3)::before{content:"3.";}
ul.list.num > li:nth-child(4)::before{content:"4.";}
ul.list.num > li:nth-child(5)::before{content:"5.";}
ul.list.num > li:nth-child(6)::before{content:"6.";}

ul.list.ast.small > li{padding-left:14px; font-weight:500;}

ul.list.dot > li > a{color:#e26086; transition:all .2s ease-in-out;}
ul.list.dot > li > a:hover{color:#df0031; text-decoration:underline;}

ul.list.box{background:#181818; padding:20px; margin:20px auto;}

/*
================================================================================================================
TOPに戻る
================================================================================================================
*/
#page-top{
  display:flex;
  color:#ff6000;
  background:#fffddb;
  /*font-size:clamp(1.375rem, 0.966rem + 2.05vw, 2.5rem); 40-22*/
  font-size:clamp(1rem, 0.636rem + 1.82vw, 2rem);/*32-16*/
  text-align:center;
  border-top:4px solid #ff6000;
  /*border-bottom:4px solid #ff6000;*/
  padding:20px;
  margin:0 auto;
  justify-content:center;
  transition:all .2s ease;
  p{line-height:100%; border-bottom:2px solid; padding:0 10px 5px; transition:all .2s ease;}
  &:hover{/*color:#fff;*/ background:#b6ffda;}
}
@media screen and (max-width:480px){#page-top{border-top:2px solid #ff6000;; border-bottom:2px solid #ff6000; margin:0 auto;}}