/* :rootのCSS変数の宣言 */
:root {
    --txtcolor: #222;
    --rogoblue: #0e6eb8;
    --lightblue: #e8f0ff;
    --gray: #888;
    --red: #ff2b2b;
    --green: #16c473;
    font-size: 14px;
  }

@media screen and (min-width: 830px) {  :root { font-size: 16px; }}

body {
    color: var(--txtcolor);
    /*background-image: linear-gradient(#222222, #737373 51%, #222222);*/
    line-height: 1.8;
    font-family:  "Noto Sans JP","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
    background: url(../images/top_bg3_mobile.png) no-repeat center 100px;
    background-attachment: fixed;
}
@media screen and (min-width: 830px) { body { background: url(../images/top_bg3.png) no-repeat right 100px fixed } }

* {  box-sizing: border-box; }
dt { font-weight: normal; }
img { max-width: 100%; height: inherit; line-height: 0; vertical-align:middle; }
.mgt10 { margin-top:  10px;}
.mgt1rem {margin-top: 1rem;}
.mgt2rem {margin-top: 2rem;}
.fwb { font-weight: bold;}
.txt-center { text-align: center;}
.txt-right { text-align: right;}
.fs08 { font-size: 0.8rem;}
.fs14 { font-size: 1.4rem;}
.fs16 { font-size: 1.6rem;}

.txtwhite { color: #fff; }
.txtred { color: var(--red); }
.txtylw { color:#fbff00; }
.txtgre { color: var(--green); }
.underline { text-decoration: underline; }
.inline-block { display: inline-block; }


/*ラインマーカー*/
.marker {
  padding-bottom: 0.5rem;
    background:linear-gradient(transparent 90%, #fbff00 62%); 
     background-repeat: no-repeat;
     background-size: 0% 100%;
     transition: 1s;
  }
  .marker.type02 {
    background:linear-gradient(transparent 90%, #ff9100 62%); 
  }
 .marker.on {
     background-size: 100% 100%;
   }

/* スクロールでIN　*/
.scrin { opacity: 0; transition: all 1s; top: 20px; position: relative;}
.scron { opacity: 1; top: 0px; }

/* header */
header { text-align: center; }
.site-rogo { padding: 6px 10px 0 10px;  text-align: left; background: var(--rogoblue);}
.site-rogo img { width: 30%; max-width: 200px;}
.site-rogo img {
  filter: brightness(0) invert(1);
}
#top-visual { display: block;}
#top-visual div.top-rogo,#top-visual div.massage  { padding: 1rem 0;}

h1 { font-size: 2.4rem; color: #004a86; font-weight: bold; margin-bottom: 1rem; line-height: 1.2; margin-top: 1.2rem; }
.lead { font-size: 1.1rem; line-height: 1.2;}

@media screen and (min-width: 830px) { 
#top-visual { display: flex; align-items: center; width: 90%; margin: 0 auto;}
#top-visual div.top-rogo,#top-visual div.massage  { padding: 5rem 0;}
#top-visual div.top-rogo { text-align: right; width: 40%; text-align: right; padding-left: 10wv;}
#top-visual div.massage { text-align: center; width: 70%; height: 100%;  align-items: center;}
.lead { font-size: 1em; line-height: 1.2;}
h1 { font-size: 2.4em; color: #004a86; font-weight: bold; margin-bottom: 1rem; line-height: 1.2; margin-top: 1.2rem; }
.lead { font-size: 1.4em; line-height: 1.2;}
}

/* サイト幅 */
.area { width: 100%; max-width: 1100px; margin: 0 auto; padding: 1rem 0.5rem; }
@media screen and (min-width: 830px) { 
.area { padding: 2rem 0.5rem; }
}

/*section01"*/

.section01 { text-align: center; padding-top: 1rem; }
.kakuho { background-image: linear-gradient(90deg, #b68c0a, #ffdd75);  display: inline-block; padding: 0 1em;
margin: 0 auto 0 auto; text-align: center; font-size: 1.4rem; font-weight: 600; }
.kakuho span { font-size: 1.3em;}
.jiseki { font-weight: 600; font-size: 1.6rem; line-height: 1.2; margin-top: 1rem; }
.contact {text-align: center; width: 100%;}
    .contact p { padding: 1rem 0;}
    .contact p img { width: 60%;}

.section01 .area { display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;}
.box { text-align: left; width: 49%; }
.box h2 { font-size: 1.36rem; font-weight: 600; line-height: 1.2; margin-bottom: 8px; }

.box li { border-left: solid 4px #0073ff; margin-bottom: 1.4rem; padding-left: 0.5rem; padding-bottom: 0.8rem; }
.box li p { line-height: 1.2; }
.c02 li {  border-color:#41ff07; }
.c03 li { border-color:#ff1f1f;}
.box.c03 { width: 100%; }
.box.c03 ul { display: flex;  justify-content: space-between; flex-wrap: wrap;}
.box.c03 ul li { width: 50%; }
.box.c03 ul li.wide { width: 100%; }

@media screen and (min-width: 830px) { 
.kakuho { font-size: 2.1em; padding: 0 2em; margin-top: 1rem; }
.jiseki { font-size: 1rem; }
.section01 .area { display: flex; justify-content: space-between; flex-wrap: wrap; position: relative;}
.contact { position: absolute; left: 35%; width: 30%; text-align: center;}
    .contact p { padding: 1rem 0;}
    .contact p img { width: 60%;}
.box { text-align: left; width: 30%;}
.box h2 { font-size: 1.6rem; }
.box li { border-width: 6px; margin-bottom: 1.4rem; padding-left: 1em; padding-bottom: 0.8rem; }
.box.c03 ul li,.box.c03 ul li.wide  { width: 30%; }

}

/* 光るボタン */
.contact-btn {
	background: #ffee00;
	border-radius: 100vh;
	color: #111;
	display: inline-block;
	overflow: hidden;
	padding: 20px 40px;
	position: relative;
	text-decoration: none;
  font-size: 2rem;
  font-weight: 600;
  transition: .3s;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);

}
.contact-btn::after {
	animation: 4s 4s shine linear infinite;
	background: linear-gradient(to right, rgba(255,255,255,0) 25%, rgba(255,255,255,.6) 50%, rgba(255, 255, 255, 0) 75%);
	content: '';
	height: 100%;
	left: -100%;
	position: absolute;
	top: 0;
	transform: skewX(-15deg);
	width: 100%;
}
.contact-btn:hover { color: #fff; }
@keyframes shine {
	30% {
		left: 100%;
	}
	100% {
		left: 100%;
	}
}
.slider {
  overflow: hidden;
  width: 100%;
}
.track { display: flex; }
.slide { flex: 0 0 35%; /* ★これが5枚表示 */}
.slide img {
  width: 100%;
  display: block;
}
@media screen and (min-width: 830px) { 
.slide {
  flex: 0 0 20%; /* ★これが5枚表示 */
}
.contact-btn { font-size: 1.6rem; }
}

.section02 {
  background: #1A6DAA;
  color: #1A6DAA;
  text-align: center;
  padding: 1rem;
}



.fukidashi { background: #fff; max-width: 1000px; margin: 0 auto 2rem auto; padding: 2rem 1rem; border-radius: 10vh; position: relative;}
.fukidashi h2 { font-size: 1.4rem; font-weight: 600; margin-bottom: 1.6rem; }


.fukidashi::after { content: " "; position: absolute; left: 40%; bottom: -30px; background: #ffffff; width: 80px; height: 80px; z-index: 99;
border-radius: 50px; }
.fukidashi ul::after { content: " "; position: absolute; bottom: -80px; left: 40%; background: #ffffff; width: 30px; height: 30px; z-index: 99;
border-radius: 50px; }

.section02 h2.txt { margin-top: 100px; color: #fff; line-height: 2; font-size: 1.2rem; font-weight: 600;}
.section02 h2.txt span.marker { color: #ffebae; font-size: 1.8rem;}

.fukidashi li { padding-left: 70px; text-align: left; margin-bottom: 1.5rem; line-height: 1.6; position: relative;}
.fukidashi li div { position: absolute; top: 0; left: 0; text-align: center;}
.fukidashi li img { width: 50px;}


@media screen and (min-width: 830px) { 
.section02 { padding: 2rem; }
.fukidashi {  padding: 3rem; border-radius: 20vh; }
.fukidashi h2 { font-size: 1.6rem; font-weight: 600; margin-bottom: 1.6rem; }


.fukidashi ul { display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; margin: 0 20px;}
.fukidashi ul li { width: 30%; padding-bottom: 200px; position: relative;}

.fukidashi::after { left: 44%; bottom: -40px; width: 100px; height: 100px; }
.fukidashi ul::after { bottom: -150px; left: 40%; width: 40px; height: 40px;}

.section02 h2.txt { margin-top: 120px; color: #fff; line-height: 2; font-size: 1.4rem; font-weight: 600;}
.section02 h2.txt span.marker { color: #ffebae; font-size: 2rem;}

.fukidashi li { padding-left: 0; text-align: left; text-align: center;}
.fukidashi li div { position: absolute;  top: 100px; }
.fukidashi li img { width: 70%; min-width: 100px;}
}

/*section03 */

.section03 h3,
.section04 h2,.section05 h2  {
  border-bottom: solid 5px #252525;
  position: relative;
   font-size: 2rem;
   margin: 1rem 0 2rem 0;
}

.section03 h3:after,
.section04 h2:after,.section05 h2:after  {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 5px var(--rogoblue);
  bottom: -5px;
  width: 30%;
}

  .l-inner {
    position: relative;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    max-width: 1200px;
  }

  [class*=swiper]:focus {
    outline: none;
  }

  .slide-media,
  .thumb-media {
    position: relative;
    overflow: hidden;
  }
  .slide-media img,
  .thumb-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }


  .swiper-button-prev, .swiper-button-next {
    display: grid;
    place-content: center;
    width: 6.4rem;
    height: 6.4rem;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }
  .swiper-button-prev::before, .swiper-button-next::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    border-radius: 50%;
    -webkit-box-shadow: var(--box-shadow);
            box-shadow: var(--box-shadow);
  }
  .swiper-button-prev::after, .swiper-button-next::after {
    width: 1.2rem;
    height: 1.2rem;
    content: "";
    border: solid var(--color-gray);
    border-width: 3px 3px 0 0;
  }
  .swiper-button-prev::after {
    margin-left: 0.4rem;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }
  .swiper-button-next::after {
    margin-right: 0.4rem;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .swiper-button-disabled {
    pointer-events: none;
    opacity: 0;
  }

  .gallery01 {
    overflow: hidden;
  }
  .gallery01 .swiper {
    margin: auto;
  }
  .gallery01 .swiper-main {
    overflow: visible;
  }
  .gallery01 .swiper-thumb {
    padding-top: 8px;
  }
  .gallery01 .swiper-fade .swiper-slide {
    -webkit-transition-property: opacity, -webkit-transform !important;
    transition-property: opacity, -webkit-transform !important;
    transition-property: opacity, transform !important;
    transition-property: opacity, transform, -webkit-transform !important;
    pointer-events: none;
  }
  .gallery01 .swiper-thumb .slide-media { border: solid 1px #d8d8d8; cursor: pointer;}

  .gallery01 .swiper-fade .swiper-slide-active {
    pointer-events: auto;
  }
  .gallery01 .swiper-controller {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 62.5%;
  }
  .gallery01 .swiper-scrollbar::after {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    margin: auto;
    content: "";
    background-color: #eee;
  }
  .gallery01 .swiper-scrollbar-drag {
    height: 20px;
    padding: 8px 0;
    cursor: pointer;
    background-color: var(--color-theme);
    background-clip: content-box;
  }
  .gallery01 .swiper-scrollbar-drag:active {
    background-color: var(--color-theme-darken);
  }
  .gallery01 .slide {
    display: block;
    overflow: hidden;
  }
  .gallery01 .slide-media {
    padding-top: 62.5%;
    border-radius: 4px;
  }
  .gallery01 .slide-media img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  .gallery01 .slide-title {
    font-weight: bold;
    line-height: 1.6;
    padding: 3.2rem 0;
  }
  .gallery01 .thumb-media {
    padding-top: 100%;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    border-radius: 4px;
  }
  .gallery01 .thumb-media img {
    height: calc(100% + 8px);
    -webkit-transition: var(--transition);
    transition: var(--transition);
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  .gallery01 .swiper-slide-thumb-active {
    -webkit-transition: var(--transition);
    transition: var(--transition);
    opacity: 0.3;
  }
  .gallery01 .swiper-slide-thumb-active .thumb-media {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  .gallery01 .swiper-slide-thumb-active .thumb-media img {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }



  @media only screen and (max-width: 1024px) {
    html {
      -webkit-text-size-adjust: 100%;
    }
    .l-inner {
      padding: 0 0.5rem;
    }
    .pc {
      display: none !important;
    }
    .gallery01 .swiper-button-prev::before, .gallery01 .swiper-button-next::before {
      background-color: rgba(0, 0, 0, 0.3);
      -webkit-box-shadow: var(--box-shadow-dark);
              box-shadow: var(--box-shadow-dark);
    }
    .gallery01 .swiper-button-prev::after, .gallery01 .swiper-button-next::after {
      border-color: #fff;
    }
    .gallery01 .swiper-button-prev {
      right: calc(100% - 3.2rem);
    }
    .gallery01 .swiper-button-next {
      left: calc(100% - 3.2rem);
    }
  }

  @media only screen and (max-width: 599px) {
    html {
      font-size: 50%;
    }
    .pc-tab {
      display: none !important;
    }
  }

  @media only screen and (min-width: 1025px) {
    .tab-sp {
      display: none !important;
    }
    .swiper-button-prev::before, .swiper-button-next::before {
      -webkit-transition: var(--transition);
      transition: var(--transition);
    }
    .swiper-button-prev:hover::before, .swiper-button-next:hover::before {
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }
    .gallery01 .swiper-scrollbar-drag:hover {
      background-color: var(--color-theme-darken);
    }
    .gallery01 .thumb-media:hover {
      -webkit-transform: translateY(-8px);
              transform: translateY(-8px);
    }
    .gallery01 .thumb-media:hover img {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }

  @media only screen and (min-width: 600px) {
    .sp {
      display: none !important;
    }
  }


.model { padding: 1rem; background: rgb(255, 255, 255); font-size: 1.2rem; box-shadow:  0 0 8px rgb(214, 214, 214);}

p.syoki { font-size: 1.6rem; font-weight: 600; padding-top: 2rem; line-height: 1.5;}
p.syoki .measu {background: #ff2b2b; color: #ffffff; display: inline-block; padding: 0 0.5em; margin-right: 1.5rem;}
p.syoki .price  { font-size: 3.6rem; font-weight: 900; color: var(--red);}

p.getugaku { font-size: 1.6rem; font-weight: 600; padding-top: 2rem; line-height: 1.5;}
p.getugaku .measu {background: var(--green); color: #ffffff; display: inline-block; padding: 0 0.5em; margin-right: 1.5rem;}
p.getugaku .price  { font-size: 3.6rem; font-weight: 900; color: var(--green);}

p.uriage { font-size: 1.6rem; font-weight: 600; text-align: center; background: #16c473; color: #fff;}


/* table全体に適用する背景色 */
table {
  border-collapse: collapse;
  width: 100%;
  border: 3px double rgb(168, 1, 1);
  background: #fff;
  margin-bottom: 1rem;
}

table th,td { font-size: 1rem; padding: 5px; border: solid 1px #ccc; font-weight: bold;  line-height: 1.2; vertical-align: middle; }
table th {
  background: #ffd5d5;
  width: 24%;
  text-align: center;
}
table th span { font-size: 0.8rem; font-weight: normal;}
table td{ text-align: right;}

/* td要素の奇数列 */
table tr td:nth-child(odd) { background: #fff0f0; }
 table.case01 { border-color: rgb(168, 1, 1);}
 table.case02 { border-color: #16c473;}
.case01 th,.case01 td {  border: solid 1px rgb(168, 1, 1); }
.case02 th,.case02 td {  border: solid 1px #16c473; }
table.case02 th{ background: #ccffe7; }

@media screen and (min-width: 830px) { 
table td{ font-size: 1.4rem; text-align: right;}
}

/*section04 */
.shoplist {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 20px; /* 余白 */
  list-style: none;
  padding: 0;
}

.shoplist li {
  text-align: center;
  margin-bottom: 10px;
}
.shoplist .name { font-size: 1.2rem; text-align: left; color: var(--rogoblue); font-weight: bold; border-left: 10px solid var(--rogoblue);  
  padding-left: 10px; margin-bottom: 10px; line-height: 1.2;}
.shoplist .detal { font-size: 0.9rem; text-align: left;  font-weight: normal; color: var(--txtcolor);}
@media screen and (min-width: 830px) { 
.shoplist .detal { padding-left: 1rem;}
}
.section05 { background-color:  var(--rogoblue); padding-bottom: 2rem; }
.section05 h2 { color: #fff;}
.section05 h2:after  {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 5px #73c0ff;
  bottom: -5px;
  width: 30%;
}
div.howto_flow ol {  padding: 0;  border-radius: 4px;  margin: 0 auto; }

div.howto_flow ol > li {
  position: relative;
  padding-left: 5rem;
}
div.howto_flow li p { color: #fff;}
div.howto_flow li p.txt { font-size: 1.2rem; font-weight: bold; padding-top: 0.8rem; display: inline-block;}

div.howto_flow li p.txt2 { padding: 1rem; padding-left: 0;}
div.howto_flow ol > li:not(:last-child) { padding-bottom: 20px; }
div.howto_flow ol > li .icon {
  width: 4em;
  height: 4em;
  line-height: 4em;
  text-align: center;
  border-radius: 100vh;
  display: inline-block;
  background: #fff;
  color: var(--rogoblue);
  position: absolute;
  left: 0;
  font-size: 1.1rem;
}

div.howto_flow ol > li:not(:last-child)::before {
  content: '';
  background: #c3c3c3;
  width: 5px;
  height: 100%;
  position: absolute;
  top: calc(50% - -19px);
  left: 2rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}


@media screen and (min-width: 830px) { 
div.howto_flow ol { margin: 0 10%; padding-top: 1rem;}
div.howto_flow li p { margin-right: 100px;}
div.howto_flow li { position: relative;}
div.howto_flow li img { position: absolute; right: 0; bottom:0; }
}


.section06 { background: #ff8400be; padding: 1rem; text-align: center;}

.btn-copy {
  font-size: 0.9rem;
  font-weight: bold;
  position: relative;
  margin-bottom: .2em;
  text-align: center;
}

.btn-copy:before {
  margin-right: 0.2rem;
  content: '＼';
}

.btn-copy:after {
  margin-left: 0.2rem;
  content: '／';
}

.section06 .contact-btn { display: block; margin: 0 10px; font-size: 1.6rem;}

@media screen and (min-width: 830px) { 
.btn-copy { font-size: 1.1rem;}
.btn-copy:before {margin-right: 1rem;}
.btn-copy:after { margin-left: 1rem; content: '／'; }
.section06 { padding: 3rem; }
.section06 .contact-btn {  margin: 0 10%;}
}


#footer { position: relative;}
#footer .area { padding: 1rem 0; }
#footer p.copyright-text,.frogo { text-align: center; font-size: 0.8rem;}
/* ページTOP　右下ボタン */
#page-top {
    position: fixed;
    right: 5.2vw;
    bottom: 20px;
    width: 55px;
    height: 55px;
    z-index: 10;
    opacity: 0.5;
    text-indent: -9999px;
    /*display: none;*/
    margin-bottom: 0;
}
#page-top a {
    position: relative;
    display: block;
    width: 55px;
    height: 55px;
    border-radius:50%;
    background: rgb(255, 255, 255);
    transition: opacity .8s ease;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .6);
}
#page-top a:hover { opacity: 0.8;}
#page-top a::before {
    position: absolute;
    top: 7px;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 14px;
    height: 14px;
    margin: auto;
    content: '';
    transform: rotate(-45deg);
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
}

/* スマホ・タブレット */
@media screen and (max-width: 830px) {
    #page-top  { right: 15px; bottom: 80px; }
    #page-top, #page-top a  { height: 48px; width: 48px; }
}