@charset "utf-8";

:root {
  --primary-font-size: clamp(0.625rem, -0.0262rem + 3.2558vw, 1.5rem);
  --primary-font-color: #000;
  --primary-fontfamily: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, "ヒラギノ角ゴ Pro W3", メイリオ, sans-serif;

  --primary-clr: #9fd7eb;
}

@media (max-width: 450px) {
  :root {
    --primary-font-size: 13px;
  }
}

* {
  user-select: none;
  /* CSS3 */
  -moz-user-select: none;
  /* Firefox */
  -webkit-user-select: none;
  /* Safari、Chromeなど */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
}

html {
  font-family: var(--primary-fontfamily);
  height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0px;
  font-family: var(--primary-fontfamily);

  font-weight: 400;
  /* height: 100vh; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary-font-color);
  font-family: var(--primary-fontfamily);
}

p {
  font-family: var(--primary-fontfamily);
  font-size: var(--primary-font-size);
  line-height: 1.3;
  /* letter-spacing: 0.03em; */
  color: #231815;
  font-feature-settings: "palt";
}

p a {
  color: #3290d7;
  text-decoration: underline;
}

.pconly {
  display: block;
}

.sponly {
  display: none;
}

img {
  image-rendering: high-quality;
  max-width: 100%;
}

body {
  background-color: white;
}

a img {
  transition: 0.5s;
}

.red {
  color: #df0615;
}

.abs {
  position: absolute;
}

.abs0 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.obj {
  position: relative;
}

#navi_item_wrap {
  position: fixed;
  top: 0;
  width: 100%;
  max-width: 750px;
  aspect-ratio: 750 / 120;
  max-height: 120px;
  overflow: hidden;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
  will-change: filter;
  pointer-events: none;

  background-color: #fff;
  display: block;
  transition: 0.5s;
  opacity: 0;
  transform: translateY(-100px);
}

#navi_item_wrap:has(li.active) {
  display: block;
  z-index: 100;
  pointer-events: all;
  opacity: 1;
  transform: translateY(0);
  /* animation: fadeInDown 0.5s ease 0s 1 normal forwards; */
}

.contentsWrapper {
  max-width: 750px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: white;
}

/* ヘッダー */

header {
  width: 100%;
  padding-inline: calc(26 / 750 * 100%);
  aspect-ratio: 750 / 76;
  min-height: 45px;
  background-color: #fff;
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.1));
  will-change: filter;
}

header .logo {
  width: calc(375 / 698 * 100%);
  min-width: 221px;
}

.head_wrap {
  width: 100%;
  padding-top: calc(30 / 750 * 100%);
  background-color: #9fd8ec;
  background: url(../images/head_bgbase.jpg) 0 0 no-repeat;
  /* background-size: contain; */
}

.__inner_top {
  width: 100%;
  position: relative;
}

.__inner_top .info {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.__inner_top .info2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.__inner_btm_base {
  z-index: -1;
}

.__inner_btm {
  width: 100%;
  position: relative;
}
.abs {
  position: absolute;
}

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

.navigation_wrap ul li a {
  display: block;
}

.navigation_wrap ul li.active a {
  pointer-events: none;
}

.navigation_wrap ul li:hover img,
.navigation_wrap ul li.active img {
  opacity: 0;
  transition: 0.5s;
}

.navigation_wrap ul li:nth-child(1) {
  width: calc(249 / 1500 * 100%);
}

.navigation_wrap ul li:nth-child(1),
.navigation_wrap ul li:nth-child(1).active {
  background: url(../images/nav01_on.jpg) 0 0 no-repeat;
  background-size: contain;
}

.navigation_wrap ul li:nth-child(2) {
  width: calc(250 / 1500 * 100%);
}

.navigation_wrap ul li:nth-child(2),
.navigation_wrap ul li:nth-child(2).active {
  background: url(../images/nav02_on.jpg) 0 0 no-repeat;
  background-size: contain;
}

.navigation_wrap ul li:nth-child(3) {
  width: calc(250 / 1500 * 100%);
}

.navigation_wrap ul li:nth-child(3),
.navigation_wrap ul li:nth-child(3).active {
  background: url(../images/nav03_on.jpg) 0 0 no-repeat;
  background-size: contain;
}

.navigation_wrap ul li:nth-child(4) {
  width: calc(250 / 1500 * 100%);
}

.navigation_wrap ul li:nth-child(4),
.navigation_wrap ul li:nth-child(4).active {
  background: url(../images/nav04_on.jpg) 0 0 no-repeat;
  background-size: contain;
}

.navigation_wrap ul li:nth-child(5) {
  width: calc(250 / 1500 * 100%);
}

.navigation_wrap ul li:nth-child(5),
.navigation_wrap ul li:nth-child(5).active {
  background: url(../images/nav05_on.jpg) 0 0 no-repeat;
  background-size: contain;
}

.navigation_wrap ul li:nth-child(6) {
  width: calc(251 / 1500 * 100%);
}
.navigation_wrap ul li:nth-child(6),
.navigation_wrap ul li:nth-child(6).active {
  background: url(../images/nav06_on.jpg) 0 0 no-repeat;
  background-size: contain;
}

/* ネットとスマホのセット割 */

.setwari_wrap {
  padding-top: calc(50 / 750 * 100%);
  width: 100%;
  background-color: #f8f6d7;
}

.setwari_inner01 {
  padding-top: calc(10 / 750 * 100%);
  position: relative;
}

.inner_waku {
  position: relative;
  margin-top: calc(20 / 750 * 100%);
  filter: drop-shadow(5px 5px 8px rgba(0, 0, 0, 0.1));
  will-change: filter;
}

.setwari_pt_waku_01 {
  position: absolute;
  left: 0;
  top: 0;
}

.setwari_pt_waku_02 {
  position: absolute;
  left: 0;
  top: 0;
}

.setwari_pt_waku_03 {
  position: absolute;
  left: 0;
  bottom: 0;
}

.plus {
  display: block;
  width: calc(80 / 750 * 100%);
  margin-inline: auto;
  margin-block: calc(20 / 750 * 100%);
}

.setwari_pt_waku_21 {
  position: absolute;
  left: 0;
  top: 0;
}

.setwari_pt_waku_22 {
  position: absolute;
  left: 0;
  top: calc(93 / 750 * 100%);
}

.setwari_pt_waku_23 {
  position: absolute;
  left: 0;
  top: calc(187 / 750 * 100%);
}

.inner_waku2_tx {
  display: block;
  position: absolute;
  left: calc(80 / 750 * 100%);
  top: calc(514 / 670 * 100%);
  width: calc(610 / 750 * 100%);
  margin-inline: auto;
}

.cost_wrap {
  padding-top: calc(30 / 750 * 100%);
  width: 100%;
  background-color: #f6f6f6;
  padding-bottom: calc(80 / 750 * 100%);
}

.cost_waku {
  display: block;
  width: 100%;
  aspect-ratio: 1500 / 2136;
}

.cost_inner_waku_base {
  z-index: -1;
}

/* クーポン */

.coupon_wrap {
  padding-top: calc(30 / 750 * 100%);
  width: 100%;
  background-color: #fdeee6;
  padding-bottom: calc(80 / 750 * 100%);
}

.coupon_waku_pt01 {
  position: absolute;
  top: calc(-20 / 1448 * 100%);
  left: 0;
}

.coupon_waku_pt02 {
  position: absolute;
  top: calc(162 / 1448 * 100%);
  left: 0;
}

.waku_inner_coupon {
  position: absolute;
  top: calc(255 / 1448 * 100%);
  left: 0;
}

.coupon_waku_pt04 {
  position: absolute;
  top: calc(644 / 1448 * 100%);
  left: 0;
}

.coupon_waku_pt05 {
  position: absolute;
  top: calc(812 / 1448 * 100%);
  left: 0;
}

.coupon_waku_pt06 {
  position: absolute;
  top: calc(925 / 1448 * 100%);
  left: 0;
}

.coupon_waku_bt {
  position: absolute;
  top: calc(1270 / 1448 * 100%);
  left: 0;
}

/* お手続き方法 */

.howtoproceed_wrap {
  padding-top: calc(30 / 750 * 100%);
  width: 100%;
  background-color: #f6f6f6;
  padding-bottom: calc(80 / 750 * 100%);
}

.howto_waku {
  margin-top: calc(10 / 750 * 100%);
  width: 100%;
  aspect-ratio: 1500 / 4198;
  display: block;
}

.howto_waku_base {
  z-index: -1;
}

/* 通信以外のサービス */

.service_wrap {
  padding-top: calc(30 / 750 * 100%);
  width: 100%;
  background-color: #f8f6d7;
  padding-bottom: calc(80 / 750 * 100%);
}

.service_waku {
  width: 100%;
  display: block;
  position: relative;
  aspect-ratio: 750 / 1739;
}

.service_bts {
  width: 100%;
  position: absolute;
  left: 0;
  top: calc(552 / 1739 * 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.service_bts li {
  width: 50%;
}

.service_bts li a {
  display: block;
}

.service_bts li a img {
  filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
  will-change: filter;
}

/* よくあるご質問 */
.qanda_wrap {
  padding-top: 0;
  width: 100%;
  background-color: #f6f6f6;
}
.qanda_tab_wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.qanda_tab_wrap_tabs {
  width: 100%;
  margin-inline: auto;
  display: flex;
}
#qanda_tabs[data-target="tab01"] .qanda_tab_wrap_tabs {
  background: url(../images/tab01_bg.png) 0 0 no-repeat;
  background-size: 100% auto;
}
#qanda_tabs[data-target="tab02"] .qanda_tab_wrap_tabs {
  background: url(../images/tab02_bg.png) 0 0 no-repeat;
  background-size: 100% auto;
}
#qanda_tabs[data-target="tab03"] .qanda_tab_wrap_tabs {
  background: url(../images/tab03_bg.png) 0 0 no-repeat;
  background-size: 100% auto;
}

.qanda_tab_wrap_tabs button img {
  opacity: 0;
}
.qanda_tab_wrap_tabs button:nth-child(1).active {
  background: url(../images/tab01_on.png) 0 0 no-repeat;
  background-size: 100% auto;
}
.qanda_tab_wrap_tabs button:nth-child(2).active {
  background: url(../images/tab02_on.png) 0 0 no-repeat;
  background-size: 100% auto;
}
.qnada_contents_wrap {
  width: 100%;
}
.btm {
  display: block;
  width: 100%;
  height: calc(50 / 750 * 100%);
  min-height: 50px;
  background: url(../images/qanda_bg_btm.png) 0 bottom no-repeat;
  background-size: 100% auto;
}
.qnada_contents_wrap {
  width: 100%;
  display: block;
  background: url(../images/qnada_tab_content_bg.png) 0 0 repeat-y;
  background-size: 100% auto;
}
.qnada_contents_wrap .a {
  width: 100%;
  background: url(../images/qnada_a_bg.png) 0 0 no-repeat;
  background-size: 100% auto;
  padding-bottom: calc(40 / 750 * 100%);
}
.qnada_contents_wrap .a p {
  font-size: clamp(0.8125rem, 0.2078rem + 3.0233vw, 1.625rem);
  line-height: 1.6;
  padding-inline: calc(30 / 750 * 100%);
  width: 100%;
  padding-left: calc(350 / 1500 * 100%);
  padding-right: calc(170 / 1500 * 100%);
  padding-top: calc(25 / 750 * 100%);
  font-feature-settings: "palt";
}

.qnada_tab01_content,
.qnada_tab02_content,
.qnada_tab03_content {
  display: none;
  opacity: 0;
  transition: 0.5s;
}

#qanda_tabs[data-target="tab01"] .qnada_tab01_content,
#qanda_tabs[data-target="tab02"] .qnada_tab02_content,
#qanda_tabs[data-target="tab03"] .qnada_tab03_content {
  display: block;
  opacity: 1;
  transition: 1s;
  @starting-style {
    opacity: 0;
  }
}
/* フッター */

footer p {
  font-size: clamp(0.75rem, 0rem + 3.2vw, 1.5rem);
  line-height: 1.6;
  margin-bottom: 0.3em;
}

footer h3 {
  font-size: clamp(1rem, 0.125rem + 3.7333vw, 1.875rem);
  font-weight: bold;
  text-align: center;
  padding: calc(20 / 750 * 100%);
  background-color: #535353;
  color: #fff;
}

footer .footer_btm_inner {
  width: 100%;
  padding: calc(60 / 750 * 100%);
  background-color: #e1e1e1;
}

footer .footer_btm_inner p:nth-of-type(1) {
  margin-bottom: 2em;
}

footer p.waku {
  border: 1px solid #000;
  padding: 0.2em 0.5em;
}

p.copy {
  font-size: clamp(0.6875rem, 0.25rem + 1.8667vw, 1.125rem);
  margin-bottom: 0;
  text-align: center;
  padding: calc(10 / 750 * 100%);
  background-color: #e1e1e1;
  padding-bottom: calc(110 / 750 * 100%);
}

p#back-top a {
  position: fixed;
  width: calc(65 / 750 * 100vw);
  max-width: 65px;
  aspect-ratio: 1;
  z-index: 999;
  right: 50px;
  bottom: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.8;
  filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.2));
  transform: translateZ(0);
}

@media (max-width: 749px) {
  p#back-top a {
    right: calc(50 / 750 * 100vw);
    bottom: calc(110 / 750 * 100vw);
  }
}

p#back-top a:hover {
  opacity: 1;
}

p#back-top a img {
  width: 50%;
}

.btminner {
  padding: calc(50 / 750 * 100%) calc(40 / 750 * 100%) calc(80 / 750 * 100%);
}

.accordion {
  overflow: hidden;
  border-radius: 10px;
}

.accordion .accordion-ttl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  background-color: #6c7378;
  padding: calc(20 / 750 * 100%) calc(40 / 750 * 100%);
}

.accordion .accordion-ttl img {
  width: clamp(1.5rem, 0.25rem + 5.3333vw, 2.75rem);
  aspect-ratio: 1;
}

.accordion .accordion-ttl h3 {
  font-size: clamp(0.8125rem, 0.125rem + 2.9333vw, 1.5rem);
  font-weight: bold;
  color: #fff;
}

.accordion-content {
  background-color: #d7dde0;
  padding: 0.2rem 1.5rem 0.6rem;
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.5s;
}

.modal_contentsWrapper .accordion-content {
  background-color: #d7dde0;
  padding: 1rem 1.5rem;
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.5s;
}

.modal_contentsWrapper {
  padding: 0.9rem 1.2rem;
}

.modal_contentsWrapper .accordion-content p {
  font-size: clamp(0.75rem, 0rem + 3.2vw, 1.5rem);
  line-height: 1.6;
}

.modal_contentsWrapper .accordion-content p a {
  color: #3290d7;
  text-decoration: underline;
}

.modal_contentsWrapper .accordion-content p.waku {
  border: 1px solid #000;
  padding: 0.5em;
  margin-block: 0.5em;
}

/* モーダルページ */
#modalWrap {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  margin-inline: auto;
  height: 100vh;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  overflow-y: auto;
  display: none;
  opacity: 0;
  overscroll-behavior-y: contain;
  overflow-y: auto;
}

#modalWrap.active {
  display: block;
  /* opacity: 1; */
  pointer-events: all;
  animation: fadeIn 0.8s ease 0s 1 normal forwards;
}

#modalWrap.closing {
  display: block;
  animation: fadeOut 0.8s ease 0s 1 normal forwards;
}

.modal_contentsWrapper.setdiscount {
  background-color: #f8f6d7;
}

.modal_contentsWrapper .accordion {
  position: relative;
  max-width: 673px;
  margin-inline: auto;
}

.modal_contentsWrapper .accordion .accordion-ttl img {
  rotate: x 180deg;
}

.modal_contentsWrapper .accordion .modalClosedBtn {
  position: fixed;
  display: block;
  width: 89%;
  max-width: 673px;
  top: 0;
}

.modal_contentsWrapper .accordion .modalClosedBtn img {
  width: clamp(1.5rem, 0.25rem + 5.3333vw, 2.75rem);
  aspect-ratio: 1;
  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.2));
  transform: translateZ(0);
  will-change: filter;
  position: absolute;
  right: 4.5%;
  top: 10px;
}

.nav_wrap {
  width: 100%;
  max-width: 750px;
  position: fixed;
  bottom: 0;
  background-color: #2c56b0;
  z-index: 100;
  filter: drop-shadow(0px -3px 8px rgba(0, 0, 0, 0.3));
  will-change: filter;
}

.nav_wrap .coupon_wrapper .coupon_bt_wrap {
  width: 100%;
  aspect-ratio: 750 / 100;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav_wrap .coupon_wrapper .coupon_bt_wrap a {
  width: calc(700 / 750 * 100%);
}

a.couponpage {
  transition: 0.5s;
}

a:not(.navigation_wrap li a):hover img {
  scale: 1.1;
}

/* 2025.12.04 追記 */

.head_wrap_2025 {
  width: 100%;
  position: relative;
  background-color: #9fd8ec;
  padding-bottom: calc(30 / 750 * 100%);
}
.head_wrap_2025 a:hover img {
  scale: 1.08 !important;
}