* {
  margin: 0;
  padding: 0;
	box-sizing: border-box;
}
/*基準を1rem=10pxに設定*/
html {
    font-size: 62.5%;
}
body {
  font-family: "Noto Sans JP",'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', sans-serif;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: center;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%
}
@media all and (-ms-high-contrast: none) {
  body {
    font-family: 'メイリオ', Meiryo, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif
  }
}
::selection {
  background-color: yellow
}
::-moz-selection {
  background-color: yellow
}
img {
  vertical-align: middle;
  border: 0
}
ol, ul {
  list-style: none
}
a {
  text-decoration: none
}
a:focus {
  outline: none
}
a:active, a:hover {
  outline: 0
}
body {
  color: #000;
  font-weight: bold;
  min-width: 375px
}


.cmn_bg {
  width: 100%;
  height: 100%
}
img {
  width: 100%;
	height: auto;
  vertical-align: middle
}
.cmn_inner {
  width: 92%;
  margin: 0 auto
}
.cmn_inner_02{
  width: 92%;
  margin: 3em auto 5em;
}
.cmn_inner_03{
  width: 92%;
  margin: 1em auto 2em;
}

.in_bnr{display: flex;flex-wrap: wrap;flex-direction: column;gap:15px;}

@media screen and (min-width: 750px) {
.in_bnr{gap:30px;}

}
.hukidashi {
  position: relative;
  display: inline-block;
  margin: 1em auto 1.5em;
  padding: 10px;
  font-size: clamp(1.8rem, calc(1.6rem + 0.625vw), 3.6rem);
  background: #0b318f;
	border-radius: 10px;
	font-weight: bold;
width: 75%;
    box-sizing: border-box;
	color: #fff;
}



.youtube {
    position: relative;
    width: 95%;
    padding-top: 56.25%; /* 16:9のアスペクト比 */
    height: 0;
	margin: 0 auto;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.content02{
}

.content03{
}
.cmn_btn {
  position: relative;
  padding: 2%;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  background-color: #fff;
	border: #0068b7 3px solid;
  border-radius: 50px;
  transition: all 0.3s;
	box-sizing: border-box;
	  font-size: clamp(1.8rem, calc(1.6rem + 0.625vw), 3.6rem);
color: #0068b7;
}

.cmn_btn.b02{
border: #000 3px solid;
color: #000;
	margin-bottom: 1.5em;
}



.cmn_btn .icon {
  width: auto;
  height: 30px;
}
.cmn_btn .btn_flex {
  display: flex;
  align-items: center;
  justify-content: center;
	gap:5px;
}
.cmn_btn.hover {
  box-shadow: 0 3px 15px #fff
}

.hukidashi_b {
  position: relative;
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 10px;
  background-color: #ff0000;
  color: #fff;
  margin: 1em auto 0;
  padding: 10px;
  font-size: clamp(1.8rem, calc(1.6rem + 0.625vw), 3.6rem);
	font-weight: bold;
	width: 80%;
	box-sizing: border-box;
	z-index: 3;
}

.hukidashi_b::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 16px 10px 0 10px;
  border-color: #fff transparent transparent;
  translate: -50% 100%;
}

.hukidashi_b::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 12px 7.8px 0 7.8px;
  border-color: #ff0000 transparent transparent;
  translate: -50% 100%;
}
.hukidashi_b.z02 {
width: 100%;
  margin: 0.4em auto 0;
	z-index: 2;
	padding: 3%;
	border: #fff 3px solid;
border-radius: 20px;	
}
.hukidashi_b_last {
width: 100%;
  margin: 0.4em auto 0;
	z-index: 1;
	padding: 3%;
	border: #fff 3px solid;
	background: #ff0000;	
  border-radius: 20px;
	box-sizing: border-box;
	color: #fff;
	margin-bottom: 5%;
}
.step{
  font-size: clamp(2.6rem, calc(2.4rem + 0.625vw), 4rem);
	font-weight: 900;
	line-height: 1;
	margin-bottom: 20px;
}
.step span{
  font-size: clamp(4rem, calc(3.8rem + 0.625vw), 8rem);
}
.tit{
	font-size:clamp(2.4rem, 0.274rem + 4.43vw, 3.6rem);
	text-align: center;
	font-weight: bold;
	line-height: 1.2;
	padding: 5%;
	box-sizing: border-box;
	width: 100%;
}
.tit span{
	font-size:clamp(1.6rem, -0.68rem + 5.17vw, 3.2rem);
}
.content02 .tit{
	background: #FFFF00;
}
.content03 .tit{
	background: #38A1DB;
	color: #fff;
}
.content04 .tit{
	background: #288141;
	color: #fff;
}
.content05 .tit{
	background: #D6C292;
}
.content06 .tit{
	background: #2086B7;
	color: #fff;
}
.content07 .tit{
	background: #005BAC;
	color: #fff;
}
.content08 .tit{
	background: #00AABB;
	color: #fff;
}
.content09 .tit{
	background: #AAD3C3;
}
.content10 .tit{
	background: #8DD1E6;
}
.content11 .tit{
	background: #E3007F;
	color: #fff;
}

.list_01{
	display:flex;
	gap:10px;
	margin-bottom: 30px;
}
.list_01 > li{
	color: #fff;
	padding: 5px;
	line-height: 1;
}
.list_01 > li.pink{
	background: #FD37DF;
}
.list_01 > li.blue{
	background: #0082FF;
}
.list_01 > li.green{
	background: #4FE006;
}
.price{
	margin:2em 0;
	text-align: left;
}
.price p:first-child{
  font-size:clamp(1.6rem, -1.234rem + 5.91vw, 3.2rem);
	font-weight: 500;
}
.price p:last-child{
  font-size: clamp(2.4rem, -1.851rem + 8.87vw, 4.8rem);
	font-weight: 500;
}
.price p:last-child span{
font-size: clamp(1.8rem, -0.68rem + 5.17vw, 3.2rem);
}

.h03{font-size: clamp(2.2rem, calc(1.8rem + 0.625vw), 6rem);
	font-weight: bold;
	text-align: left;margin-bottom: 10px;}

.txt_01{
  font-size: clamp(1.8rem, -0.326rem + 4.43vw, 3rem);
	font-weight: bold;
	text-align: left;margin-bottom: 10px;
}
.txt_02{
  font-size: clamp(1.4rem, -0.371rem + 3.7vw, 2.4rem);
	text-align: left;line-height: 1.8;
	font-weight: normal;margin-bottom: 7vw;
}

@media screen and (min-width: 750px) {
.txt_02{
margin-bottom: 30px;
}
}

.txt_03{
  font-size:clamp(2rem, -1.897rem + 8.13vw, 4.2rem);
	font-weight: bold;
	margin-bottom: 1em;
	letter-spacing: -1px;text-align: left;
}
.txt_03 span{
  font-size: clamp(3rem, -2.314rem + 11.09vw, 6rem);padding-right: 1em;
}


.txt_04{
  font-size: clamp(2.6rem, calc(1.2rem + 0.625vw), 3.5rem);
	font-weight: bold;
	margin-bottom: 30px;
}
.txt_05{
  font-size: clamp(1.8rem, calc(1.6rem + 0.625vw), 4.3rem);
	font-weight: 500;
	color: #fff;
	margin-bottom: 15px;
}
.txt_06{
  font-size: clamp(2rem, calc(1.8rem + 0.625vw), 4.2rem);
	font-weight: bold;
	color: #fff;
	margin-bottom: 20px;
}
.list_txt > li{
	text-align: left;
	font-size:1.4rem;
	font-weight: normal;
}


.txt_02_03 {
  width: 100%;
  height: 160px; 
  overflow-y: scroll; 
	padding: 5px;
	box-sizing: border-box;
	text-align: left;
	background: #fff;
	font-size: 1.4rem;
	font-weight: normal;
}

.ttl_contact{
	background:#000;
	font-weight: bold;
	color: #fff;
	font-size: 1.8rem;
	margin: 5% 0 15px;
	padding: 2px;
}
.txt_contact{
	color:#fff;
	font-weight: normal;
	text-align: left;
  font-size: clamp(1.2rem, calc(1.0rem + 0.625vw), 1.6rem);
}
.txt_contact a{
	color: #fff;
	text-decoration: underline;
}

.hukidashi_b_02 {
  position: relative;
  display: inline-block;
  border: 1px solid #0b318f;
  border-radius: 10px;
  background-color: #fff;
  color: #0b318f;
  margin: 1em auto 1.5em;
  padding: 10px;
  font-size: clamp(1.8rem, calc(1.6rem + 0.625vw), 3.6rem);
	font-weight: bold;
	width: 80%;
	box-sizing: border-box;
	z-index: 3;
}

.hukidashi_b_02::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 14px 8px 0 8px;
  border-color: #0b318f transparent transparent;
  translate: -50% 100%;
}

.hukidashi_b_02::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 12px 7.8px 0 7.8px;
  border-color: #fff transparent transparent;
  translate: -50% 100%;
}
.txt_kome{
	font-size:1.4rem;
	font-weight: normal;
	margin-bottom: 20px;
}
.txt_kome02{
	font-size:1.4rem;
	font-weight: normal;
	text-align: left;
	margin-bottom: 30px;
}
.shop_list{
	display:flex;
	justify-content: space-between;
	margin-bottom: 30px;
}
.shop_list > ul{
width: 32%;
}

.shop_list > ul > li{
font-size: clamp(1.2rem, calc(0.8rem + 0.625vw), 1.4rem);
	font-weight: normal;
	margin-bottom: 5px;
	text-align: left;
}
.shop_list > ul > li.cat{
	color: #0b318f;
	font-weight: 500;
}


.wrap_cmn {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

.bnr_outer{background: url("../img/bnr_bg.png")repeat center center;overflow: hidden;}

.bnr_box {
  display: flex;flex-wrap: wrap;justify-content: space-between;gap:10px;
  margin: 1em auto;
	max-width: 92%;overflow: hidden;
}
.bnr_box > li {max-width: calc(50% - 5px);}

.view_sp {
  display: block
}
@media screen and (min-width: 750px) {
	.bnr_box {	max-width: 92%;}
  .view_sp {
    display: none
  }
}
.view_pc {
  display: none
}
@media screen and (min-width: 750px) {
  .view_pc {
    display: block
  }
}

.more:hover{cursor: pointer;}
.txt-hide{display: none;}

/*slider
--------------------------------------*/
  .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: 13px;
    height: 20px;
    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%;
	  background: rgba(255,255,255,.8);
  }
*/  .swiper-button-prev::after, .swiper-button-next::after {
    width: 10px;
    height: 10px;
    content: "";
    border: solid #243346;
    border-width: 2px 2px 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;
	  position: relative;
  }
.gallery01 .swiper {
    max-width: 650px;
    margin: auto;
    position: inherit;
}
@media screen and (max-width: 750px) {
.gallery01 .swiper {
    max-width: 90%;
}	
}
  .gallery01 .swiper-main {
    overflow: visible;
  }
  .gallery01 .swiper-thumb {
    padding-top: 1em;
  }
  .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-fade .swiper-slide-active {
    pointer-events: auto;
  }
  .gallery01 .swiper-controller {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 62.5%;
  }
  .gallery01 .swiper-button-prev, .gallery01 .swiper-button-next {
    position: absolute;
    z-index: 1;
    top: -20%;
    bottom: 0;
    margin: auto;
  }
  .gallery01 .swiper-button-prev {
    left:0;
  }
  .gallery01 .swiper-button-next {
    right:0;
  }

  .gallery01 .slide {
    display: block;
    overflow: hidden;
  }
  .gallery01 .slide-media {
    padding-top: 65%;
    border-radius: 4px;
  }
  .gallery01 .slide-media img {
    -o-object-fit: contain;
       object-fit: contain;
  }

  .gallery01 .thumb-media {
/*    padding-top: 100%;*/
	  padding-top: 70%;
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }

.gallery01 .thumb-media:hover {cursor: pointer;}
/*  
  .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.5;
  }
/*
  .gallery01 .swiper-slide-thumb-active .thumb-media {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
  .gallery01 .swiper-slide-thumb-active .thumb-media img {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
*/
.relative{
	position: relative;
}



header {
  margin: 0 auto;
  position: relative
}
header .top_logo {
  padding: 10px 0 5%;
  width: 20%;
	height: auto;
}
footer .top_logo {
  padding: 0px 0 1.5em;
  width: 25%;
	height: auto;
}
header h1{ 
	width: 95%;
  margin: 0 auto}
main .cmn_bg_img {
  position: relative;
  height: 100%
}
main .ribon {
  width: 71%;
  padding: 45px 0 10px
}
main .bg_img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: -1
}
main .text_f {
  color: #fff;
  font-weight: 600
}
main .col_02 {
  color: #E5006E
}
main .wrap_flex {
  margin: 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between
}
main .wrap_flex .card {
  width: calc(100% / 2 - 1.5%)
}
main .wrap_flex .card p {
  display: block;
  font-size: 10px;
  padding: 7px 0;
  background-color: #fff
}
main .box_inner_flex {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 15px
}
main .box_inner_flex .step {
  padding-right: 14px;
  width: 31%
}
main .box_inner_flex .step_txt {
  font-size: 18px
}
main .logo {
  width: 56%;
  padding-top: 10px
}
main .kome_tit {
  display: block;
  text-align: left;
  font-size: 18px;
  border-bottom: #333 solid 2px
}
main .text_box {
  padding: 15px 0
}
main .text_box .kome_txt {
  text-indent: -1em;
  padding-left: 1em;
  text-align: left;
  font-size: 14px;
  line-height: 1.7
}
main .text_box .text_s {
  text-align: left;
  font-size: 14px;
  line-height: 1.7
}
main .text_box .kome_link {
  color: #333;
  border-bottom: 1px solid #333
}
main .text_box .kome_link.hover {
  border-bottom: none;
  opacity: 0.7
}
main .footer_txt {
  color: #fff;
  font-size: 14px;
  padding: 20px 0;
  font-family: Verdana, 'Droid Sans';
	background: #000;
}


.maru_waku{
    border: 3px solid #0b318f;
    border-radius: 15px;
    background-color: #fff;
    color: #0b318f;
    margin: 1em auto 1.5em;
    padding: 5px;
    font-size: clamp(1.2rem, calc(1.2rem + 0.625vw), 1.8rem);
    font-weight: bold;
    width: 92%;
    box-sizing: border-box;text-align: center;
    z-index: 3;}

.foot_bnr{margin-bottom: 1.5em;}

footer .btn_top{position: fixed; right: 10px;bottom: 10px;width: 48px;height: 48px;}

.fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s, transform 1s
}
.fade.active {
  opacity: 1;
  transform: translateY(0px)
}