@charset "utf-8";
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700;900&display=swap');*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
/* =========================================================初期設定 */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body {
 color: #555;
 background-color: #fff;
 font-family: 'Noto Sans JP', "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
 font-size: 1.7em;
 margin: 0;
 padding: 0;
 font-feature-settings: "palt";
}
::placeholder {
 font-family: 'Noto Sans JP', sans-serif;
}
html {
 font-size: 62.5%;
 scroll-behavior: smooth;
}
:root {
 --color-main: #ef9f3b;
 --color-b: #6F96CF;
 --color-r: #CF6F6F;
 --color-g: #6FCF6F;
 --color-bg: #f8fafc;
 --color-rg: #fffbfb;
 --color-gg: #f1fbf1;
 --color-txtlink: #2817e7;
 --color-white1: hsl(0, 0%, 100%);
 --color-black: hsl(0, 0%, 0%);
 --color-gray1: hsl(0, 0%, 95%);
 --color-gray2: hsl(0, 0%, 80%);
 --color-gray3: hsl(0, 0%, 60%);
 --color-gray4: hsl(0, 0%, 30%);
 --color-blue1: hsl(200, 85%, 60%);
 --color-blue2: hsl(214, 79%, 60%);
 --color-blue3: hsl(214, 79%, 40%);
 --color-orange1: hsl(35, 100%, 50%);
 --color-orange2: hsl(35, 100%, 60%);
 --color-orange2o: hsla(35, 100%, 60%, 0.7);
 --color-red1: hsl(0, 100%, 50%);
 --color-lblue1: hsl(201, 100%, 96%);
 --color-lblue2: hsl(201, 100%, 80%);
 --color-lblue3: hsl(202, 100%, 41%);
 --color-liberty1: hsl(169, 100%, 97%);
 --color-liberty2: hsl(169, 47%, 65%);
 --color-liberty3: hsl(169, 65%, 37%);
 --color-event0: hsl(205, 100%, 33%);
 --color-event1: hsl(212, 47%, 49%);
 --color-event2: hsl(228, 56%, 98%);
 --color-event3: hsl(358, 67%, 41%);
 --color-event4: hsl(55, 100%, 95%);
 --border-radius1: 10px;
 --border-radius4: 40px;
}
h2, h3, h4, h5 {
 font-weight: 400;
}
a {
 text-decoration: none;
 color: var(--color-gray4);
}
a:hover {
 opacity: .8;
 transition: all 0.5s ease;
}
img {
 width: 100%;
 height: auto;
}
main, article {
 display: grid;
 gap: 3em;
}
.header-block {
 position: sticky;
 top: 0;
 z-index: 2;
}
.l-header {
 position: relative;
 top: 0;
}
img.search-bar-submit {
    max-width: 28px;
    margin: 0 auto;
}
.icon-sch {
 z-index: 9990;
 position: absolute;
 background: #e5e5e5;
 top: 0;
 width: 60px;
 right: 60px;
 aspect-ratio: 1;
 img {
  max-width: 27px;
 }
 a {
  display: flex;
  place-content: center;
 }
}
#top > div:not(.band), article {
 max-width: 1100px;
 margin-inline: auto;
 display: grid;
 gap: 1em;
 padding: .5em;
}
article {
 gap: 2em;
}
#top {
 background: hsl(30, 100%, 98%);
 .topimg {
  margin: 0 auto;
 }
 section:has(.topimg) {
  display: grid;
  gap: 1.5em;
  max-width: 990px;
  margin: 0 auto;
 }
 .bubble-box {
  display: grid;
  gap: 1em;
 }
 .bubble-ac {
  max-width: 300px;
  margin: 0 auto;
  padding: .5em;
 }
}
.band {
 background: var(--color-main);
 text-align: center;
 display: flex;
 place-content: center;
 align-items: center;
 font-size: clamp(.8em, 2.0vw, 1.0em);
}
.band > a {
 display: block;
 width: 100%;
 padding: 5px 5px 6px;
}
.band > a > div {
 display: flex;
 margin: 0 auto;
 width: fit-content;
 gap: 1em;
 align-items: center;
}
.cd-box {
 aspect-ratio: 1;
 background: red;
 border-radius: 100%;
 padding: 0;
 margin: -18px 0;
 width: 5em;
 display: grid;
 place-content: center;
 line-height: 1.1;
 color: var(--color-white1);
 font-weight: 800;
}
.cd-box #days {
 display: flex;
 align-items: baseline;
 line-height: 1;
}
.cd-box #days .num {
 font-size: clamp(1.57em, 5vw, 2.2em);
 top: 1px;
 position: relative;
}
#days:has(.num.one) {
 align-items: center;
}
.band .campaign {
 font-weight: bold;
 color: var(--color-b);
 -webkit-text-stroke: 7px var(--color-white1);
 text-stroke: 7px var(--color-white1);
 paint-order: stroke;
 font-size: clamp(1.2em, 2.0vw, 1.6em);
 letter-spacing: 2px;
 line-height: 1.2;
 padding-bottom: 3px;
}
.band .campaign > span {
 font-size: 1.3em;
}
.nb3-box-top2 {
 border: 3px dashed var(--color-main);
 padding: 1em;
 max-width: 45em;
 margin: 0 auto;
 background-color: #fff;
 border-radius: 10px;
}
.nb3-box-top2 > div {
 display: grid;
 grid-template-columns: 37% 1fr;
 gap: 10px;
 max-width: 530px;
 margin: 0 auto;
 align-items: center;
}
.nb3-box-top2-text {
 display: grid;
 gap: 2px;
}
.nb3-box-top2-text > img {
 max-width: 250px;
}
.nb3-box-top2-text > span {
 display: inline-block;
 color: var(--color-main);
 font-weight: 700;
 padding-left: 1em;
 text-indent: -1em;
 font-size: clamp(.8em, 3.0vw, 1.0em);
}
.nb3-lead {
 margin: 0 auto;
 font-weight: 700;
 line-height: 1.7em;
 font-size: clamp(1.0em, 2.0vw, 1.2em);
 > span {
  margin-inline: auto;
  max-inline-size: max-content;
  display: block;
 }
}
.pack-box {
 display: flex;
 gap: 5px;
}
.mark {
 width: fit-content;
 background: var(--color-r);
 color: var(--color-white1);
 font-size: clamp(.6em, 2.0vw, .8em);
 border-radius: 50px;
 padding: 3px 8px 4px;
 line-height: 1.2;
}
.bubble {
 display: grid;
 grid-template-columns: auto 1fr;
 align-items: center;
 width: 100%;
 padding: 1em;
 gap: .5em;
 box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
 z-index: 1;
 + img {
  display: none;
 }
 > img {
  max-width: 100px;
 }
 > img + div {
  display: grid;
  gap: .3em;
 }
}
div.bubble_green .mark {
 background: var(--color-g);
}
div.bubble_blue .mark {
 background: var(--color-b);
}
.bubble_red > .bubble {
 border-radius: var(--border-radius1);
 background: var(--color-rg);
}
.bubble_green > .bubble {
 border-radius: var(--border-radius1);
 background: var(--color-gg);
}
.bubble_blue > .bubble {
 border-radius: var(--border-radius1);
 background: var(--color-bg);
}
section[class$="_sec"] {
 display: grid;
 gap: 1em;
}
section[class$="_sec"] .txt-area div:has(h3) {
 display: grid;
 gap: .5em;
}
.txt-area {
 display: grid;
 border-radius: var(--border-radius1);
 gap: 1em;
 align-items: flex-start;
}
.txt-area + .txt-area {
 margin-top: 2em;
}
.txt-area h3 {
 font-size: clamp(1.0em, 4vw, 1.6em);
}
.txt-area > div:has(img) {
 border: 3px solid var(--color-r);
 border-radius: var(--border-radius4);
 padding: 1em;
}
.office_sec .mark {
 background: var(--color-g);
}
.office_sec .txt-area > div:has(img) {
 border-color: var(--color-g);
}
.jdl_sec .mark {
 background: var(--color-b);
}
.jdl_sec .txt-area > div:has(img) {
 border-color: var(--color-b);
}
h2 {
 font-size: clamp(2.0em, 5.0vw, 2.5em);
 width: fit-content;
 margin: 0 auto;
 padding-bottom: 5px;
 border-bottom: 5px solid var(--color-r);
}
section.office_sec h2 {
 border-color: var(--color-g);
}
section.jdl_sec h2 {
 border-color: var(--color-b);
}
h2, h3 {
 font-weight: 800;
}
section.komon_sec :is(h2, h3) {
 color: var(--color-r);
}
section.office_sec :is(h2, h3) {
 color: var(--color-g);
}
section.jdl_sec :is(h2, h3) {
 color: var(--color-b);
}
section[class$="_sec"] h2 + p {
 font-size: clamp(1.0em, 2.0vw, 1.4em);
 font-weight: 600;
 margin-inline: auto;
 max-inline-size: max-content;
 padding: .5em 0;
}
#container.expired #top {
 border-bottom: 10px solid var(--color-main);
}
#container.expired :is(.band, div:has(> .sale)) {
 display: none;
}
#container.expired .small.price {
 display: block !important;
}
.inner {
 max-width: 1080px;
 padding: 30px 20px;
 background: #fff;
 border: 1px solid #ccc;
 margin: 0px auto;
 border-radius: 30px;
}
.subtitle + .title {
 width: 100%;
}
.subtitle {
 margin-top: 10px;
 margin-right: 10px;
 margin-left: 10px;
 margin-bottom: 10px;
 word-break: keep-all;
}
.center {
 text-align: center;
 width: auto;
}
.right {
 text-align: right;
}
.small {
 font-size: 0.8em;
}
.txtbold {
 font-weight: bold;
}
.txtsml {
 font-size: 0.90em;
}
.ba_division2 {
 display: block;
 width: 100%;
 margin: 0px auto;
}
.ba_division2 > div {
 margin: 5px;
}
.bo-01 {
 text-align: center;
 background: #0066cc;
 width: 100%;
 border-radius: 50px;
 font-weight: bold;
 font-size: 1.2em;
}
.bo-01 a {
 display: block;
 padding: 10px;
 color: #fff !important;
 position: relative;
 text-decoration: none;
}
.bo-01 a:hover {
 opacity: 0.8;
 transform: scale(1.1);
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -ms-transform: scale(1.1);
 -o-transform: scale(1.1);
}
.imgsize img {
 max-width: 100%;
}
.imgsize {
 text-align: center;
}
.imgsize > p {
 text-align: left;
 margin-left: 15px;
}
.sale {
 background: #d3121a;
 padding: 7px;
 color: #FFFFFF;
 text-align: center;
 font-weight: bold;
 letter-spacing: 1px;
}
.txtbox {
 font-size: 0.9em;
 padding: 20px 0;
}
.txtline {
 text-decoration-line: underline;
 text-decoration-color: #d3121a;
 text-decoration-thickness: 3px;
 text-decoration-skip-ink: none;
 text-underline-offset: 3px;
}
.subtitle {
 font-size: 0.8em;
}
.price-box {
 margin-top: 20px;
}
.price-box > p.center {
 margin: 10px 0;
}
.bgcol {
 background-color: #e7d0a9;
 padding: 5px;
 font-weight: bold;
}
section#mailto {
 scroll-margin-top: 80px;
}
/*メディアクエリ*/
@media print, screen and (min-width:480px) {
 #top > div:not(.band), article {
  padding: 1em;
 }
 .campaign {
  > br {
   display: none;
  }
 }
 .subtitle {
  font-size: 1.0em;
 }
 .subtitle + .title {
  max-width: 470px;
  margin: 0 auto;
 }
 .txtbox {
  font-size: 1.0em;
 }
 .txtsml {
  font-size: 1.1em;
 }
 .imgsize > p {
  text-align: left;
  margin-left: 5%;
 }
}
@media print, screen and (min-width:768px) {
 .icon-sch {
  width: 80px;
  right: 70px;
 }
 #top {
  .bubble-box {
   grid-template-columns: repeat(2, 1fr);
   margin: 4em 0 1em;
  }
  .bubble-ac {
   position: relative;
   transform: translate(-1em, 1em);
   max-width: 380px;
   margin: initial;
  }
 }
 #top .bubble-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 4em 0 1em;
 }
 :is(.bubble_red, .bubble_green, .bubble_blue) > .bubble {
  background: transparent;
 }
 .bubble {
  width: 100%;
  font-size: clamp(.85em, 1.5vw, 1.1em);
  grid-template-columns: clamp(80px, 10vw, 100px) 1fr;
  box-shadow: none;
 }
 .bubble-box > .bubble_red {
  width: 113%;
  transform: translateX(-10px);
  > img {
   width: 100%;
   height: 170%;
   transform: translateX(6px);
  }
 }
 .bubble_green > img {
  width: 90%;
  top: 56%;
  left: 48%;
  transform: rotate(8deg);
  height: 190%;
 }
 .bubble-box > .bubble_blue {
  width: 122%;
  transform: translateX(-20px);
  > img {
   width: 100%;
   height: 80%;
   transform: translateX(16px);
  }
 }
 .bubble_red > .bubble {
  transform: translateY(-10px);
 }
 .bubble_green > .bubble {
  transform: translateY(-33px);
 }
 .bubble_blue > .bubble {
  width: 89%;
 }
 .bubble + img {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: block;
 }
 .bubble-box > div {
  position: relative;
  display: grid;
  place-content: center;
 }
 .txt-area {
  grid-template-columns: 40% 1fr;
 }
 section:nth-of-type(even) .txt-area, section.jdl_sec .txt-area:nth-of-type(even) {
  grid-template-columns: 1fr 40%;
 }
 section:nth-of-type(even) .txt-area > div:has(img), section.jdl_sec .txt-area:nth-of-type(even) > div:has(img) {
  order: 2;
 }
 .ba_division2 {
  display: flex;
  justify-content: space-around;
  max-width: 1080px;
  margin: 20px auto;
 }
 .imgsize {
  width: 50%;
 }
 .sale {
  font-size: 1.2em;
 }
 .bo-01 {
  width: 45%;
 }
}
@media print, screen and (min-width:1024px) {
 .bubble-box > .bubble_blue {
  width: 110%;
 }
	 .bubble-box > .bubble_red {
  width: 108%;
  transform: translateX(0px);
  > img {
   width: 100%;
   height: 170%;
   transform: translateX(6px);
  }
}
@media print, screen and (min-width:1200px) {}
@media print, screen and (min-width:1536px) {}