/*!
Theme Name: onasupport
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: onasupport
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

onasupport is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}


/*基本の設定*/
html{

  scroll-behavior: smooth;
}

p:empty{
  margin:0;
  padding:0;
}
body{
  font-family: "YakuHanJPs","Roboto","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Arial,"nc3Jp",sans-serif !important;
overflow-x: hidden;
}

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

h1,
h2,
h3{
  margin: 0;
}
img{
  display: block;
  max-width: 100%;
  height: auto;
  backface-visibility: hidden;
}
h1{
  font-size: 2.6rem;
  background: #17729d;
  color: #fff;
  margin: 0;
  padding: 5px;
}

.sp{
  display: none;
}
.red{
  color: #f00;
}
.grn{
  color: #94c400;
}
.pink{
  color:#ea39a1
}

/*ヘッダー*/
header{
  max-width: 100%;
  margin: 0 auto;
  background: url(images/bg_header.png)center center / cover;
}
.headerContents{
    position: relative;
  height: auto;
}
.headerContents:before {
    content: "";
    display: block;
    padding-top: 90%; /* 1:1 */
}
.headerItem01 img{
  position: absolute;
  top: 0;
  left: 10px;
  width: 80%;
  height: auto;
  z-index: 1;
}
.headerItem02 img{
  position: absolute;
  top:0;
  right:0;
  width: 60%;
  height: auto;
  z-index: 0;
}
.headerWrap{
  margin: 0 auto;
}
.headerWrap img{
  max-width: 100%;
  margin: 0 auto;
}


/*メイン*/

.mainContents{

  overflow: hidden;
}
.contentsWrap01 h2{
  background: #e01278;
  color: #fff;
  padding: 10px;
  text-align: center;
  position: relative;
  margin: 0 10px 0;
}
.contentsWrap01 h2:before{
  content: "";
  position: absolute;
  top: 6px;
  bottom: -6px;
  right: -6px;
  left: 6px;
  border: solid 1px #e01278;
  z-index: -1;
}
.contentsWrap02 h2{
text-align: center;
  font-size: 1.2rem;
margin: 20px 0 10px;
  border-bottom: 2px solid #f03696;
  padding: 10px;
}
.contentsWrap01{
position: relative;
box-sizing: border-box;
margin: 0 0 70px 0;
}
.contentsInner01{
  padding: 20px 10px;
  display: flex;
  flex-wrap: wrap;
overflow-x: auto;
}

.contentsBox01{
  margin: 10px;
  width: calc( 50% - 20px);

}
.contentsItem01{
  display: flex;
  justify-content: space-between;
align-items: center;

}
.contentsItem{
     position: relative;
    overflow: hidden;
}
.contentsItem::before{
    content: "";
    padding-top: 100%;
    display: block;
}
.contentsItem img{
      width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
  border-radius: 10px;
}
.contentsItem01 img{
  width: 40px;
}
.contentsItem01,
.contentsBox02{
  padding: 5px;
  font-size: 0.9rem;
  font-weight: 700;
}
.contentsItem01 span,
.contentsBox02 span{
  font-size: 0.8rem;
}
.contentsWrap02 img{
  width: 150px;
  margin: 5px;
  border-radius: 10px;
}


.block{
  margin-bottom: 30px;
}
.box{
  margin: 0 auto;
  overflow: hidden;
position: relative;

}
.box-inner{
  padding: 10px;
}

.more{
  height: 55px;
  line-height: 55px;
  margin-top: -25px;
  text-align: center;
  color: #333;
  cursor: pointer;
　display:inline-block;
  width: 60%;
  margin: 0 auto;
  background: #ecb8b8;
  border-radius: 45px;
  margin: 0 auto;
}

.more:after{
    content:'';
    display: inline-block;
    font-weight: bold;
    font-size: 18px;
    -webkit-transition: .3s;
    transition: .3s;
  }
.is-active:after{
    content:'';
    }

.no-active:before {
  content: "";
  width: 100%;
  height: 110px;
  display: block;
  background: #fff;
  background: linear-gradient(rgba(255,255,255,0) 0, rgb(255, 255, 255) 98%);
  position: absolute;
  bottom: 0;
  left: 0;
z-index: 20;
}

.contentsWrap04 a{
  display: block;
  padding: 10px;
  border: 2px solid #333;
  border-radius: 5px;
  width: 60%;
  margin: 30px auto;
  text-align: center;
  font-weight: 700;
}


.slick-slider {

  text-align: center;
}
/*吹き出し*/
.row {
  display: flex;
  margin: 10px 10px 0 10px;
}
.row.reverse {
  flex-direction: row-reverse;
}
.row img {
  width: 80px;
  border-radius: 50%;
  border: 2px solid #e62484;;
}
.row p{
  background: none;
  margin: 0;
}
.rowIcon{
  text-align: center;
  padding: 20px 0;
}
.balloon,
.balloonright{
  position: relative;
  background: #fff3b0;
  color: #333;
  padding: 10px;
  border-radius: 10px;
  width: 100%;
  margin: 20px 0 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.balloonright{
  margin: 20px 20px 20px 0px;
}
.balloon:before {
  content: "";
  position: absolute;
  top: 25%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 20px solid #fff3b0;
  z-index: 2;
}
.balloonright:before {
  content: "";
  position: absolute;
  top: 25%;
  right: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 20px solid #fff3b0;
  z-index: 2;
}
.bln--red,
.blnr--red{
  background: #cf5454;
  color: #fff;
}
.bln--red:before{
  border-right: 20px solid #cf5454;
}
.blnr--red:before{
  border-left: 20px solid #cf5454;
}
.bln--pink,
.blnr--pink{
  background: #ffedfe;
  color: #3e3d3d;
}
.bln--pink:before{
  border-right: 20px solid #ffedfe;
}
.blnr--pink:before{
  border-left: 20px solid #ffedfe;
}
.bln--sky,
.blnr--sky{
  background: #d4f7ff;
  color: #3e3d3d;
}
.bln--sky:before{
  border-right: 20px solid #d4f7ff;
}
.blnr--sky:before{
  border-left: 20px solid #d4f7ff;
}
.bln--blue,
.blnr--blue{
  background: #4052bf;
  color: #fff;
}
.bln--blue:before{
  border-right: 20px solid #4052bf;
}
.blnr--blue:before{
  border-left: 20px solid #4052bf;
}
.bln--grn,
.blnr--grn{
  background: #3c7202;
  color: #fff;
}
.bln--grn:before{
  border-right: 20px solid #3c7202;
}
.blnr--grn:before{
  border-left: 20px solid #3c7202;
}
.bln--org,
.blnr--org{
  background: #da9129;
  color: #fff;
}
.bln--org:before{
  border-right: 20px solid #da9129;
}
.blnr--org:before{
  border-left: 20px solid #da9129;
}
.bln--yel,
.blnr--yel{
  background: #fff3b0;
  color: #3e3d3d;
}
.bln--yel:before{
  border-right: 20px solid #fff3b0;
}
.blnr--yel:before{
  border-left: 20px solid #fff3b0;
}
.bln--wit,
.blnr--wit{
  background: #fff;
  color: #333;
  border: solid 3px #555;
}
.bln--wit:before{
content: "";
  position: absolute;
  top: 25%;
  left: -18px;
  margin-top: -8px;
  border: 8px solid transparent;
    border-right-width: 8px;
    border-right-style: solid;
    border-right-color: transparent;
  border-right: 10px solid #fff;
  z-index: 2;
}
.bln--wit:after{
  content: "";
  position: absolute;
  top: 25%;
  left: -23px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right: 10px solid #555;
  z-index: 1;
}
.blnr--wit:before{

}
.blnr--wit:after{
  content: "";
  position: absolute;
  top: 25%;
  right: -23px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-left: 10px solid #555;
  z-index: 1;
}
.bdred,
.bdredr{
  border: solid 2px #b72d2d;
}
.bdred:after{
  border-right: solid 12px #b72d2d;
}
.bdredr:after{
  border-left: solid 12px #b72d2d;
}
.bdblue,
.bdbluer{
  border: solid 2px #5ba0d0;
}
.bdblue:after{
  border-right: solid 12px #5ba0d0;
}
.bdbluer:after{
  border-left: solid 12px #5ba0d0;
}

.bdpink,
.bdpinkr{
  border: solid 2px #e62484;
}
.bdpink:after{
  border-right: solid 12px #e62484;
}
.bdpinkr:after{
  border-left: solid 12px #e62484;
}
.bdsky,
.bdskyr{
  border: solid 2px #baeaf9;
}
.bdsky:after{
  border-right: solid 12px #baeaf9;
}
.bdskyr:after{
  border-left: solid 12px #baeaf9;
}
.bdyel,
.bdyelr{
  border: solid 2px #f7e583;
}
.bdyel:after{
  border-right: solid 12px #f7e583;
}
.bdyelr:after{
  border-left: solid 12px #f7e583;
}
.bdgrn,
.bdgrnr{
  border: solid 2px #51a256;
}
.bdgrn:after{
  border-right: solid 12px #51a256;
}
.bdgrnr:after{
  border-left: solid 12px #51a256;
}
/*装飾*/

.marker {
  background-image: -webkit-linear-gradient(left, transparent 50%, rgb(228, 255, 97) 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgb(228, 255, 97) 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
  background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
  background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
  background-repeat: repeat-x;
  background-size: 200% .8em;
  background-position: 0 .5em;
  transition: all 2s ease;
}
.marker.on {
 background-position: -100% .5em;
}

/*ボタン*/

.btnWrap{
  width:100%;
  padding: 20px;
}

.btnWrap02{
  width:100%;
  background: #fff;
  padding: 20px 0;
  margin: 0;
}
.btnWrap03{
  padding: 20px 0;

}
.btn{
  background: #fff;
  padding: 20px 0;
  text-align: center;
  color: #ff9001;

  border-radius: 15px;
  font-size: 1.2rem;
  font-weight: 700;
  width: 100%;
  margin: 0 auto;
}
.btn03{
  background: #f9a401;
  padding: 10px 0;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  font-size: 1.6rem;
  font-weight: 700;
  width: 60px;
  margin: 0 auto;
  line-height: 1.6rem;
}
a.btn:visited,
a.btn:hover {
  color: #fff;
}
.btn--orange {
  background-color: #f19709;
  border-bottom: 5px solid #c68302;
  color: #fff;
}
.btn--red {
  background-color: #c20000;
  border-bottom: 5px solid #990202;
}
.btn--grn {
  background-color: #81b70b;
  border-bottom: 5px solid #6a9905;
}
.btn--grn02 {
  background: rgb(3,210,8);
  background: linear-gradient(0deg, rgba(3,210,8,1) 0%, rgba(1,161,5,1) 100%);
  border-bottom: 5px solid #026217;
}
.btn--dgrn {
  background-color: #3c7202;
  border-bottom: 5px solid #315c03;
}
.btn--yer {
  background: rgb(255,190,49);
  background: linear-gradient(0deg, rgba(255,190,49,1) 0%, rgba(223,131,0,1) 100%);
  border-bottom: 5px solid #6f5e00;

}

.btn--yer02 {
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8);
  background: rgb(249,164,1);
  background: linear-gradient(0deg, rgba(249,164,1,1) 0%, rgba(253,216,0,1) 71%, rgba(255,246,0,1) 100%);
  border-bottom: 5px solid #6f5e00;
}
.btnContents a{
  animation: btnani 1.5s linear infinite normal;
}

@keyframes btnani {
  0% {
        transform: scale(1.05)
    }
  5% {
        transform: scale(1)
    }
  15% {
        transform: scale(1.05)
    }
  85% {
        transform: scale(1)
    }
  100% {
        -webkit-transform: scale(1.05)
    }
}


@keyframes inout {
  0% { transform: scale(1.0, 1.0); }
  50% { transform: scale(1.15, 1.15); }
  100% { transform: scale(1.0, 1.0); }
}
@-webkit-keyframes inout { 
  0% { -webkit-transform: scale(1.0, 1.0); }
  50% { -webkit-transform: scale(1.15, 1.15); }
  100% { -webkit-transform: scale(1.0, 1.0); }
}

.fadeInRight {
  -webkit-animation-name: fadeInRightAnime;
          animation-name: fadeInRightAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes fadeInRightAnime {
  0% {
  opacity: 0;
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
  }
  100% {
  opacity: 1;
  -webkit-transform: translateX(0);
   transform: translateX(0);
  }
}
@keyframes fadeInRightAnime {
  0% {
  opacity: 0;
  -webkit-transform: translateX(100px);
  transform: translateX(100px);
  }
  100% {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
}
.fadeInRightTrigger {
  opacity: 0;
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeftAnime;
          animation-name: fadeInLeftAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes fadeInLeftAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-150px);
            transform: translateX(-150px); 
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes fadeInLeftAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-150px);
            transform: translateX(-150px); 
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.fadeInLeftTrigger {
  opacity: 0;
}
.ar{
  animation: img_box_9955 1s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
}
     
@keyframes img_box_9955 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-10px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }
}
#page-top {
  position: fixed;
  bottom: 10px;
  right: 5px;
  z-index: 99;
}
#page-top img{
  max-width: 240px;
}
#page-top a {
  background: #59a400;
  text-decoration: none;
  color: #fff;
  width: 80px;
  height: 80px;
  padding: 10px 5px;
  text-align: center;
  display: block;
  border: #325c00 solid 1px;
font-size: 13px;
  line-height: 16px;
}
#page-top a:hover {
  text-decoration: none;
  background: #59a400;
}
#page-top span,
#page-top i{
  font-size: 16px;
  font-weight: 600;
}
#page-top i{
  font-size: 24px;
  line-height: 1.5;
}



.icon {
  display: block;
  position: relative;
  width: 24px;
  margin-left: 6px;
  flex-shrink: 0;
  transform-origin: center 43%;
  transition: transform 0.4s;
}
.icon {
  display: block;
  position: relative;
  width: 24px;
  margin-left: 6px;
  flex-shrink: 0;
  transform-origin: center 43%;
  transition: transform 0.4s;
}
.icon::before,
.icon::after {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 3px;
  background-color: #a2a2a2;
}

.icon::before {
  left: 0;
  transform: rotate(45deg);
}

.icon::after {
  right: 0;
  transform: rotate(-45deg);
}

details li{
  list-style: none;
}

.rate {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 16px;
  font-size: 16px;
}

.rate::before,
.rate::after {
  position: absolute;
  display: inline-block;
  height: 16px;
  content: '★★★★★';
  line-height: 16px;
}

.rate::before {
  color: #c4c4c4; 
}

.rate::after {
  overflow: hidden;
  width: calc(var(--score) * 16px);
  color: #ffb906; 
}


.rate-wrap {
  display: flex;
  width: 180px;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 5px 0;
  font-weight: bold;
}


/*フッター*/
footer{
  height: 100px;
  padding: 10px;
  font-size: 0.8rem;
  text-align: center;
}

.secret{
  width: 250px;
}
.secretcolor::after {
   background: linear-gradient(to right, #f00 0%, #f80 14.28%, #dd0 28.56%, #0d0 42.85%, #0dd 57.14%, #00f 71.42%, #e0e 85.71%, #f00 100%) 0% center / 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  animation: secretcolor 4s linear infinite;
}
@keyframes secretcolor {
to { background-position-x: 200%; }
}

/* パソコン */
@media (min-width: 961px) {
body{
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  line-height:2;
}
.btnContents{
  padding: 20px 0;
}

}


/* スマホ */
@media (max-width: 640px) {

}

/*フォント*/
i{
  padding: 0 5px;
}
@font-face {
  font-family: 'webfonts';
  src:  url('fonts/webfonts.eot?nlhb5u');
  src:  url('fonts/webfonts.eot?nlhb5u#iefix') format('embedded-opentype'),
    url('fonts/webfonts.ttf?nlhb5u') format('truetype'),
    url('fonts/webfonts.woff?nlhb5u') format('woff'),
    url('fonts/webfonts.svg?nlhb5u#webfonts') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="i-"], [class*=" i-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'webfonts' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.i-calendar3:before {
  content: "\e900";
}
.i-chat-dots:before {
  content: "\e901";
}
.i-chat-left-text:before {
  content: "\e902";
}
.i-chat-right-text:before {
  content: "\e903";
}
.i-chat-text:before {
  content: "\e904";
}
.i-download:before {
  content: "\e905";
}
.i-exclamation-circle:before {
  content: "\e906";
}
.i-pin-angle:before {
  content: "\e907";
}
.i-plus-lg:before {
  content: "\e908";
}
.i-search:before {
  content: "\e909";
}
.i-arrow-down:before {
  content: "\e90a";
}