@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');
/*----------------------------------------
	cssHack
----------------------------------------*/
/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  background-repeat:no-repeat;
  transition:0.2s;
  line-height:1.5;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-tap-highlight-color: transparent;
  /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
  overflow-x:hidden;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}
img{
  display:block;
  max-width:100%;
}

.col{
  display:flex;
}
h1,h2,h3,h4,h5,h6{
  font-weight:bold;
}
section{
  padding:5vw 1em;
}

@media screen and (max-width: 768px) {
  .pc_only{
    display:none;
  }
}
@media screen and (min-width: 769px) {
  .sp_only{
    display:none;
  }
}
/*----------------------------------------
メインビジュアル
----------------------------------------*/
.mv h1 img{
  width:100%;
  aspect-ratio:100 / 57;
}

.mv .hd_image{
  background-color:#0051AD;
}
.mv .hd_image h2{
  color:#FFF;
  text-align:center;
  padding:0.5em 0 0.25em;
  font-size:2em;
  padding: 1em 0 0.25em;
}
.mv .hd_image .col{
  gap:1%;
  padding:1%;
}
.mv .hd_image .col img{
  aspect-ratio:100 / 71;
}

@media screen and (max-width: 768px) {
  .mv h1 img{
    content:url(../img/mv_sp.webp);
    aspect-ratio:100 / 254;
  }
  .mv .hd_image .col{
    flex-wrap:wrap;
  }
  .mv .hd_image .col figure{
    width:49.5%;
    margin-top:1%;
  }
  .mv .hd_image h2{
    font-size:4vw;
  }
}

/*----------------------------------------
品質と技術
----------------------------------------*/
.quality{
  background-image:url(../img/quality_bg.webp);
  background-size:cover;
  background-position:top center;
  text-align:center;
}
.quality h1{
  font-family: "Zen Old Mincho", serif;
  font-size:3em;
  text-align:center;
  margin-bottom:1em;
  font-weight:600;
}
.quality p{
  text-align:center;
  font-family: "Zen Old Mincho", serif;
  font-weight:600;
  font-size:1.5em;
}

.quality .col{
  gap:5%;
  justify-content:center;
  margin:5em 0;
}

.quality .detail{
  display:flex;
  flex-wrap:wrap;
  gap:2%;
  max-width:1400px;
  margin:auto;
  @media screen and (max-width: 1480px) {
    max-width:1125px;
  }
}
.quality .detail article{
  width:48%;
  background-color:#FFF;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,0.25);
  margin-bottom:2%;
}
.quality .detail article h3{
  text-align:center;
  font-family: "Zen Old Mincho", serif;
  font-weight:600;
  font-size:2em;
  padding:1em 0;
}
.quality .detail article p{
  display:block;
  font-family: "Zen Old Mincho", serif;
  font-size:1rem;
  padding:0 2em 1em;
  text-align:left;
}
.quality .btn{
  display:block;
  max-width:50vw;
  margin:5vw auto -9vw;
  position: relative;
  z-index: 10;
}
.quality .btn img{
  margin:auto;
}
.quality .btn:hover{
    transform: translateY(0.3vw) scale(0.99);
}

@media screen and (max-width: 1200px) {
.quality h1{
  font-size:2em;
}
.quality p{
  font-size:1.25em;
}
.quality .btn{
  max-width:80vw;
}
}

@media screen and (max-width: 768px) {
.quality{
  padding-top:5em
}
.quality p{
  margin-bottom:3em;
}
.quality p br{
  display:none;
}
.quality .col{
  display:none;
}
.quality .detail{
  display:block;
  margin-top:5em;
}
.quality .detail article{
  width:auto;
  margin-bottom:2em;
}
.quality .detail article h3{
  font-size:1.5em;
}
.quality .detail article p{
  padding:0 1em 1em;
}
.quality .btn{
  max-width:initial;
  content:url(../img/entry_btn_sp.svg);
  width:100%;
}
.quality img[src*="quality_p"]{
  margin:auto;
}

}

/*----------------------------------------
----------------------------------------*/

.about{
  background-image:url(../img/about_bg.webp);
  background-size:cover;
  background-position:bottom center;
  text-align:center;
  padding-top:10vw;
}
.about > p{
  font-size:2em;
  line-height:2;
}
.about .col{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1%;
  max-width:1400px;
  margin:5em auto 10vw;
  @media screen and (max-width: 1480px) {
    max-width:1125px;
  }
}
.about .col li{
  width:30%;
  margin-bottom:5%;
  background-color:#FFEE53;
  text-align:center;
  padding:2em 1em;
  border-radius:20px;
}
.about .col li img{
  display:block;
  margin:0 auto 1em;
}
.about .col li p{
  color:#0051AD;
  font-size:1.25em;
}

@media screen and (max-width: 1200px) {
.about > p{
  font-size:1.5em;
}
.about .col li{
  width:49%;
}
}
@media screen and (max-width: 768px) {
.about{
  padding-top:5em;
}
.about .col{
  display:block;
}
.about .col li{
  width:auto;
  margin-bottom:3em;
}
}

/*----------------------------------------
ポイント
----------------------------------------*/

.point{
  padding:0 0 1vw 0;
  background-image:url(../img/point_bg.svg);
  background-size:cover;
  background-position:bottom center;
  background-repeat:repeat;
}
.point h1{
  background-color:#0051AD;
  color:#FFF;
  text-align:center;
  padding:1em;
}
.point h1 img{
  margin:auto;
}

.point ul{
  margin:10vw auto;
  padding:0 1em;
  width:fit-content;
}
.point ul li{
  margin-bottom:5vw;
}
@media screen and (max-width: 768px) {
  .point ul li{
    margin-bottom:5em;
  }
  .point ul li img[src*="point_t1"]{
    content:url(../img/point_t1_sp.svg);
  }
  .point ul li img[src*="point_t2"]{
    content:url(../img/point_t2_sp.svg);
  }
  .point ul li img[src*="point_t3"]{
    content:url(../img/point_t3_sp.svg);
  }
  .point h1 img{
    content:url(../img/point_t_sp.svg);
  }
}
/*----------------------------------------
相談会
----------------------------------------*/

.venue{
  padding:0 0 1vw 0;
  text-align:center;
}
.venue h1{
  text-align:center;
  margin-top:5vw;
}
.venue h1 img{
  margin:auto;
}
.venue ul{
  margin:5vw auto;
  max-width:1200px;
  padding:1em;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:3%;
}
.venue ul li{
  width:30%;
  background-color:#E9F8FF;
  padding:2em 1em;
  border-radius:20px;
  color:#0051AD;
  font-weight:bold;
  margin-bottom:3%;
  font-size:1.25em;
  box-shadow:0 4px 4px rgba(0,0,0,0.25);
}
.venue > img{
  margin:auto;
}
@media screen and (max-width: 1200px) {
.venue ul li{
  width:48%;
}
}

@media screen and (max-width: 768px) {
  .venue > img[src*="point_img"]{
    content:url(../img/point_img_sp.webp);
    margin-bottom: 4em;
  }
  .venue h1 img{
    content:url(../img/info_t_sp.svg);
  }

  .venue ul{
    display:block;
  }
  .venue ul li{
    width:80%;
    margin:1em auto 2em;
    padding:2em 0;
  }
  .venue > img[src*="info_img"]{
    width:60%;
    margin-bottom:3em;
  }
}
/*----------------------------------------
イベント
----------------------------------------*/

.event{
  padding:0;
  text-align:center;
  background-color:#F9FDFF;
}
.event h1{
  background-color:#0051AD;
  color:#FFF;
  text-align:center;
  padding:1em;
  font-size:2em;
}
.event .btn{
  display:block;
  max-width:50vw;
  margin:-4.5vw auto 5vw;
}
.event .btn img{
  margin:auto;
}
.event .btn:hover{
    transform: translateY(0.3vw) scale(0.99);
    opacity:0.7;
}
.event img[src*="event_img"]{
  width:100%;
  aspect-ratio:100 / 52;
}

.event h2{
  text-align:center;
  font-size:3em;
  margin-bottom:1em;
}
.event h2 img{
  margin:auto;
  margin-bottom:1em;
}
.event h2 + p{
  font-size:1.5em;
}
.event .col{
  margin-top:5vw;
}
.event .col article{
  border-right:1px solid #B9D1EA;
  border-left:1px solid #B9D1EA;
  border-bottom:2px solid #B9D1EA;
  padding-bottom:2em;
}
.event .col article > img{
  width:3vw;
  margin:-1.5vw auto 2vw;
}
.event .col article h3{
  color:#0051AD;
  font-size:2em;
  margin-bottom:1em;
}
.event .col article p{
  font-size:1.5em;
  margin-bottom:1em;
}

@media screen and (max-width: 1200px) {
.event h2{
  font-size:2em;
  padding:0 1em;
}
.event h2 + p{
  font-size:1.25em;
  padding:0 1em;
}
.event .col{
  flex-wrap:wrap;
}
.event .col article{
  width:50%;
}
.event .col article > img{
  width:3em;
  margin-top:-1.5em;
}
.event .btn{
  max-width:75vw;
}

}

@media screen and (max-width: 768px) {
.event {
  border-bottom:2px solid #B9D1EA;
}
.event h1{
  font-size:5vw;
  padding:1em;
}
.event h2 img{
  content:url(../img/venue_t_sp.svg);
}
.event h2{
  font-size:8vw;
  margin-top:3em;
}
.event h2 + p{
  font-size:1em;
}
.event h2 + small{
  display:block;
  margin:1em 0;
}
.event img[src*="event_img"]{
  content:url(../img/event_img_sp.webp);
  aspect-ratio:100 / 224;
}
.event .btn{
  max-width:initial;
  margin-top:-6vw;
  padding:0 1em;
}

.event .btn img{
  content:url(../img/entry_btn_sp.svg);
  width:100%;
}
.event .col{
  display:block;
}
.event .col article{
  border:none;
  width:100%;
}
.event .col article > img {
    width: 4em;
    margin-top: -2em;
}
.event .col article h3{
  font-size:1.5em;
}
.event .col article p{
  font-size:1em;
}

}
/*----------------------------------------
MODEL HOUSE
----------------------------------------*/
.model{
  text-align:center;
  padding-top:8vw;
}
.model h1{
  text-align:center;
  font-family: "Crimson Text", serif;
  font-weight:normal;
  font-size:4em;
  margin-bottom:0.5em;
}
.model p{
  font-family: "Zen Old Mincho", serif;
  font-size:1.5em;
}
.model .col{
  max-width:1400px;
  margin:5em auto;
  flex-wrap:wrap;
  gap:5%;
  @media screen and (max-width: 1480px) {
    max-width:1125px;
  }
}
.model .col article{
  width:30%;
  margin-bottom:5%;
  position: relative;
  padding-bottom: 5em;
}
.model .col article img{
  width:100%;
}
.model .col article h3{
  font-family: "Zen Old Mincho", serif;
  font-size:2em;
  margin:1em;
}
.model .col article small{
  font-family: "Zen Old Mincho", serif;
  font-size:1rem;
  margin-bottom:1em;
  display:block;
}
.model .col article p{
  font-family: "Zen Old Mincho", serif;
  font-size:1.25rem;
  text-align:left;
}
.model .col article a{
  display:block;
  margin:auto;
  padding:1em;
  background-image:url(../img/model_btn.svg);
  background-size:contain;
  background-position:center;
  text-align:center;
  font-size: 1.25em;
  position: absolute;
  bottom: 0;
  left:0;
  right:0;
}
.model .col article a:hover{
    transform: translateY(0.3vw) scale(0.99);
}
@media screen and (max-width: 1200px) {
.model .col{
  flex-wrap:wrap;
}
.model .col article{
  width:46%;
}
.model .col article > img{
  width:3em;
  margin-top:-1.5em;
}
}
@media screen and (max-width: 768px) {
.model{
  padding-top:4em;
}
.model h1{
  font-size:2em;
}
.model p{
  font-size:1em;
}
  .model .col{
    display:block;
  }
.model .col article{
  width:100%;
  margin-bottom:3em;
  padding-bottom:0;
}
.model .col article h3{
  font-size:1.5em;
}
.model .col article p{
  font-size:1rem;
}
.model .col article a{
  position:initial;
  margin-top:1em;
}
}

/*----------------------------------------
QUOカード
----------------------------------------*/

.quo{
  background-image:url(../img/quo_bg.webp);
  background-size:cover;
  background-position:bottom center;
}
.quo img{
  margin:auto;
}
@media screen and (max-width: 768px) {
.quo{
  background-image:url(../img/quo_bg_sp.webp);
}
.quo img{
  content:url(../img/quo_img_sp.webp);
}

}

/*----------------------------------------
フッター
----------------------------------------*/
.footer{
  text-align:center;
  padding:2em;
}
.footer img{
  margin:auto;
}