@charset "utf-8";

/* ブラウザデフォルト*/

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
header,
hgroup,
section,
article,
aside,
hgroup,
footer,
figure,
figcaption,
nav {
    margin: 0;
    padding: 0;
    font-size: 100%;
}

body {
    line-height: 1;
    -webkit-text-size-adjust: none;
}

article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
    display: block;
}

body {
    line-height: 1;
    -webkit-text-size-adjust: none;
}

article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
    display: block;
}

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

ul,
ol {
    list-style: none;
}

/* ブラウザデフォルト*/

body {
    background-color: #FEFCFC;
    font-family: 'Noto Sans JP', sans-serif;

}

.wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

a {
    color: #F48A72;
    text-decoration: none;
  }


#top-bg {
    background-image: url(img/s/s-bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

#ptop-bg {
    background-image: url(img/s/s-bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 20px;
}

h1 {
    font-size: 12px;
    font-weight: normal;
}


#bg02 {
    background-image: url(img/s/s01-bg.png);
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 0px 16px;
}

#bg03 {
 background-color:#FAF5F7;
 padding: 0px 16px;
}


#bg04 {
    background-image: url(img/s/bg04.png);
    background-repeat: no-repeat;
    background-size: 100% auto
}

#bg05 {
    background-image: url(img/s/s-bg05.png);
    background-repeat: no-repeat;
    background-size: 100% auto
}

#bg-pink {
    background: -moz-linear-gradient(top, #FAF5F7, #FFF);
    background: -webkit-linear-gradient(top, #FAF5F7, #FFF);
    background: linear-gradient(to bottom, #FAF5F7, #FFF);
    padding: 0px 20px;
}

#bg-rpink {
    background-color: #FFF9F9;
}

#bg-rpink h2 {
    padding: 30px 20px;
}

footer {
    background-image: url(img/s/foot.png);
    background-repeat: no-repeat;
}



dl {
    position: relative;
    display: inline-block;
}

dt {
    font-size: 18px;
    line-height: 1.6em;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.05em;
    text-align: left;
    padding: 20px 0px 10px 10px;
}

dd {
    font-size: 18px;
    line-height: 1.6em;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.05em;
    text-align: right;
    padding-right: 5px;
    padding-top: 10px;
}



/* */
.text-nomal {
    font-size: 14px;
    line-height: 1.8em;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.1em;
    padding: 3px 6px;
}

.text-left {
    font-size: 14px;
    line-height: 1.8em;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.1em;
    text-align: left;
    padding: 3px 6px;
}

.text-right {
    font-size: 14px;
    line-height: 1.8em;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.1em;
    text-align: right;
    padding: 3px 6px;
}

.ptop30 {
    padding-top: 30px;
}

.bt10 {
    padding-bottom: 10px;
}
.pt10 {
    padding-top: 10px;
}

.bt20 {
    padding-bottom: 20px;
}

.bt30 {
    padding-bottom: 30px;
}

.rl16{
    padding: 0px 16px;
}

.ptb20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.ptb30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.ptb40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.bt60{
    padding-bottom: 60px;
}


.p16{padding: 16px;}

.big {
    font-size: 18px;
}

.bold {
    font-weight: bold;
}

.red {
    color: #F48A72;
    font-weight: bolder;
    font-family: 'Noto Sans JP', sans-serif;
}

.redb {
    color: #F48A72;
    font-weight: bolder;
    font-size: larger;
    font-family: 'Noto Sans JP', sans-serif;
}

.redl {
    color: #F48A72;
    font-weight: bolder;
    font-size: 18px;
    letter-spacing: 0.1em;
    font-family: 'Noto Sans JP', sans-serif;
}

.redb-title {
    color: #F48A72;
    font-weight: bolder;
    font-size: larger;
    letter-spacing: 0.4em;
}

.enclosure {
    padding: 2px 4px;
    border: 1px solid #333;
}

.center-enclosure {
    padding: 2px 4px;
    border: 1px solid #333;
    text-align: center;
}

article {
    text-align: left;
    position: relative;
    display: inline-block;
    padding-bottom: 30px;
}

article p {
    font-size: 15px;
    padding: 10px 16px;
    line-height: 1.8em;
    letter-spacing: 0.1em;
}


.text-bold {
    font-size: 20px;
    letter-spacing: 13px;
    line-height: 2;
    font-weight: bold;
}

.dot-text {
    padding-top: .4em;
    background-position: top left -2px;
    background-repeat: repeat-x;
    background-size: 1.6em .4em;
    background-image: radial-gradient(.16em .16em at center center, #F48A72, #F48A72 100%, transparent);
}

.line-gray {
    background: linear-gradient(transparent 0%, transparent 50%, #E3E3E4 50%, #E3E3E4 100%);
    font-weight: bold;
}

.line-yellow {
    background: linear-gradient(transparent 0%, transparent 50%, #F7F66D 50%, #F7F66D 100%);
    font-weight: bold;
}

.line-orange {
    background: linear-gradient(transparent 0%, transparent 50%, #FEDFDD 50%, #FEDFDD 100%);
    font-weight: bold;
}

.line-orange-big {
    background: linear-gradient(transparent 0%, transparent 50%, #FEDFDD 50%, #FEDFDD 100%);
    font-weight: bold;
    font-size: 30px;
    letter-spacing: 0.18em;
}

#sun-bg {
    text-align: center;
    padding-top: 210px;
    padding-bottom: 210px;
    margin: 20px 0px;
    line-height: 1.4em;
    letter-spacing: 0.1em;
    font-size: 20px;
    font-family: "Sawarabi Gothic";
    font-weight: bolder;
    background-image: url(img/s/s-title-sun.png);
    background-repeat: no-repeat;
    background-position: center;
}


#profile {
    background-image: url(img/s/bg-prof.png);
    background-repeat: no-repeat;
    background-position: center;
    padding: 6px 16px;
}


#profile p {
    font-size: 15px;
    line-height: 1.4em;
    text-align: left;
    color: #333;
    padding: 10px 0px;
}

#profile-line {
    padding: 20px 16px;
}


#profile-line p {
    font-size: 15px;
    line-height: 1.4em;
    text-align: left;
    color: #333;
    padding: 10px 0px;
}



.voice p {
    padding: 10px 6px;
    font-size: 15px;
    line-height: 1.8em;
    text-align: left;
}

.bg-rap {
    background-color: #FDE8E3;
    border: 1px solid #FDE8E3;
    border-radius: 10px;
    margin: 20px 0px;
}

#resolt {
    background-color: #FFF8E5;
    border: 1px solid #FFF8E5;
    border-radius: 10px;
    margin: 20px 0px;
}

#resolt p {
    letter-spacing: 0.1em;
    padding:0px 10px 10px 10px;
    line-height: 1.6em;
}

#resolt ul {
    padding: 30px 10px;
}

#resolt li {
    list-style-type: none;
    text-align: left;
    line-height: 1.8em;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
}

.msg {
    position: relative;
    display: inline-block;
}

.msg p {
    font-size: 15px;
    letter-spacing: 0.1em;
    line-height: 1.6em;
    text-align: left;
    padding: 6px 20px;
}

.place {
    position: relative;
    height: 400px;
}

.moving {
    position: absolute;
    width: 100%;
    margin-top: -30px;
}

#message {
    background-position: center center;
    background-size: contain;
    width: 100%;
    margin-top: 60px;
    background-image: url(img/s/s-water_color_bg03.png);
    background-repeat: no-repeat;
    padding: 60px 0px 10px 0px;
}

#message p {
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.6em;
    text-align: center;
}


.msg-last p {
    font-size: 15px;
    text-align: left;
    padding: 6px 20px;
    line-height: 1.8em;
    letter-spacing: 0.1em;
}

#foot {
    height: 270px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

#foot ul {
    height: 30px;
    vertical-align: bottom;
    padding-top: 100px;
    text-align: center;
    color: #F48A72;
}

#foot li {
    display: block;
    padding-bottom: 20px;
}


/* プライバシーポリシー他*/
#policy {
    padding:30px;
    background: rgba(254,223,221,0.6);
    border-radius: 10px 10px 10px 10px;
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    }
    
    #policy h1 {
      font-size: 20px;
      padding: 30px 0px;
      text-align: left;
      font-weight: bold;
    }
    
    #policy h2 {
      font-size: 20px;
      padding: 30px 0px;
      text-align: left;
    }
    
    #policy p {
      font-size: 14px;
      text-align: left;
      line-height: 1.6em;
      padding-bottom: 10px;
    }
    #policy ul {
      font-size: 14px;
      text-align: left;
    }
    #policy li {
    padding: 6px 20px;
    line-height: 1.6em;
    }
    
    #policy dl {
      font-size: 14px;
      text-align: left;
    }
    
    #policy dt {
      padding: 10px 20px;
      line-height: 1.6em;
      font-weight: bold;
      }
    
    #policy dd {
    padding: 0px 20px;
    line-height: 1.6em;
    }
    
    .table-scroll {
        overflow: scroll;
      }
    
    #policy table {
      text-align: left;
      border-collapse: collapse;
      margin: 20px 0px;
      width: 800px;
      font-size: 14px;
      overflow: scroll;
    }
    #policy th
     {
      border: 1px solid #000000;
      padding: 6px;
      font-weight: normal;
      width: 30%;
      line-height: 1.6em;
    }
    
    #policy td {
      border: 1px solid #000000;
      padding: 6px;
      line-height: 1.6em;
    }


.attention{
    position: relative;
    display: inline-block;
    background-repeat: no-repeat;
    margin: 60px 20px;
    border: #F48A72 6px double;
    padding: 10px;
  }
  
  .attention p {
    font-size: 15px;
    letter-spacing: 0.1em;
    line-height: 1.6em;
    text-align: left;
    padding-bottom: 20px;
  }
  
  .attention h4{
  font-size: 18px;
  color: #F48A72;
  padding: 20px 0px;
  }

  .attention h5{
    font-size: 18px;
text-align: center;
padding-bottom: 10px;
    }

  .btn,
a.btn,
button.btn {
  font-size: 18px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding: 16px 16px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #ffffff;
  border-radius: 0.5rem;
}

.btn-orange,
a.btn-orange {
  color: #fff;
  background-color: #F48A72;
}
.btn-orange:hover,
a.btn-orange:hover {
  color: #fff;
  background: #C5973E;
}

#bg-line{
    background: url(img/s/bg-line.jpg);
}

/*** ボタン用装飾 ***/
.button{
    text-align: center;
    margin: 1rem;
    font-size: 18px;
  font-weight: bold;
  }

  
  
  /* リンク部分 */
  .button a{
    display: inline-block;
    padding: 16px;
    background: #F48A72; /*ボタン色*/
    color: #fff;
    text-decoration: none; /*下線削除*/
    border-radius: 0.5rem;
  }


/*** ボタンを光らせる ***/
.btn-shine a{
    position: relative; /*疑似要素の起点*/
    overflow: hidden; /*範囲外の光を隠す*/
  }
  
  /*** ボタンをキラッとさせる ***/
  .btn-shine a:after{
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 10%;
    height: 150%;
    background: #fff; /*光の色*/
    transform: rotate(45deg); /*45度傾ける*/
    animation: reflect 5s ease-in-out infinite;
  /*animation: アニメ名｜光る周期｜動き方｜ループ*/
  }
  
  /*** 光のアニメーション ***/
  @keyframes reflect{
    0%,75%{
      transform: rotate(45deg) scale(0);
      opacity: 1;
    }
    100%{
      transform: rotate(45deg) scale(100);
      opacity: 0;
    }
  }