@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=Noto+Sans+JP:wght@500&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;
  }
}

.wrap{
    max-width: 1400px;
    margin:auto;
  padding:0 1em;
}
/*----------------------------------------
メインビジュアル
----------------------------------------*/
.mv h1 img{
  width:100%;
  aspect-ratio:100 / 69;
}

.mv .hd_image{
  background-color:#39C98B;
}
.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;
}


@keyframes scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-yoko {
  display: flex;
  overflow: hidden;
}
.scroll-yoko div {
  display: flex;
  gap:1%;
  list-style: none;
  padding:0 0 1em 1%;
  animation: scroll-left 50s infinite linear 0.5s both;
}
.scroll-yoko figure {
  width: calc(100vw / 6);
}
.scroll-yoko figure >img {
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .scroll-yoko figure {
    width: calc(100vw / 4);
  }
}

@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;
  }
  .scroll-yoko figure {
    width: calc(100vw / 2);
  }
}


.tokuten{
	background-color:#FDFFEE;
}

.present{
	background-color:#FFF;
  padding:0;
  background-image:url(../img/present_bg.webp);
  background-size:cover;
  background-position:top center;
}

.present h1{
  width:60%;
	margin:auto;
}
.present h1 img{
	display:block;
  width: 100%;
  margin-top:-5vw;
}

@media screen and (max-width: 768px) {
.present h1{
  width:90%;
}
.present h1 img{
  margin-top:-12vw;
}
}
.present ul{
	padding:3vw calc((100% - 1400px) / 2);
	display:flex;
  justify-content:center;
	flex-wrap:wrap;
  gap:3%;
}
.present ul li{
	width:30%;
	margin-bottom:2em;
}
.present ul p{
	text-align:right;
	width:100%;
}
@media screen and (max-width: 768px) {
.present {
  padding-bottom:5em;
}
.present ul{
  display:block;
}
.present ul li{
	width:70%;
  margin:3em auto;
}
.present ul li img{
	width:100%;
}
.present p[align="right"]{
  text-align:center;
}
}
/*----------------------------------------
QUOカード
----------------------------------------*/

.quo{
  background-image:url(../img/quo_bg.webp);
  background-size:cover;
  background-position:bottom center;
	background-color:#FFFF85;
  position:relative;
}
.quo img{
  margin:auto;
}
@media screen and (max-width: 768px) {
.quo{
  padding:10vw 0;
  background-image:url(../img/quo_bg_sp.webp);
}
}

.quo h1{
  position:absolute;
  top: -2vw;
  left:0;
  right:0;
}
@media screen and (max-width: 768px) {
  .quo{
    padding: 10vw 0 4em;
  }
  .quo img{
    width:80%;
    margin:auto;
  }
  .quo p{
    text-align:center;
    margin-top:2em;
    font-size: 3vw;
  }
}
/*----------------------------------------
品質と技術
----------------------------------------*/
.quality{
  background-image:url(../img/quality_bg.webp);
  background-size:cover;
  background-position:bottom center;
  text-align:center;
  padding: 0 1em 5vw;
}
.quality h1{
  font-family: "Noto Sans JP", serif;
  font-size:3em;
  text-align:center;
  margin-bottom:1em;
  font-weight:700;
}
.quality p{
  text-align:center;
  font-family: "Noto Sans JP", serif;
  font-size:1.5em;
}

.quality .col{
  gap:5%;
  justify-content:center;
  margin:5em auto;
  max-width:1280px;
}

.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;
  position: relative;
  z-index: 10;
  margin:auto;
}
.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:5em 0 0;
}
.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{
  margin-top:5em!important;
  width:100% !important;
  max-width: 100%;
}
.quality img[src*="quality_p"]{
  margin:auto;
}

}
.quality .btn{
  display:block;
  padding:2em;
  background-color:#FFF;
  width:fit-content;
  margin-top:5vw;
}



.merit{
  background-image:url(../img/merit_bg.svg);
  background-size:cover;
  background-position:top center;
  padding:10vw 0 0;
}
@media screen and (max-width: 768px) {
.merit{
  padding:20vw 1em 0;
}
}

.merit .wrap{
	text-align:center;
}
.merit h1{
	font-size:3em;
  text-align:center;
}
.merit h2{
  text-align:center;
  margin:auto;
  width:fit-content;
}
.merit > p{
	margin-top:1em;
  text-align:center;
  font-size:calc(0.5em + 0.75vw);
}
.merit .col{
  margin:5em auto;
  justify-content:center;
  gap:5%;
}
.merit div p{
  font-size:20px;
}
@media screen and (max-width: 768px) {
.merit h2 img{
  content:url(../img/merit_title_sp.svg);
}
.merit h2 + p{
  margin-top:1em;
  font-size:20px !important;
}
.merit .col{
  display:none;
}
.merit .sp_only{
  margin:3em auto;
}
.merit div p{
  font-size:16px;
}

}


.merit .merit_col{
  margin-top:5em;
}
.merit .merit_col li{
  display:flex;
  gap:5%;
  place-items: flex-start;
  margin-bottom:5em;
}
.merit .merit_col li div{
  text-align:left;
  width:40%;
}
.merit .merit_col li div strong{
  font-size:1.5em;
  margin-bottom:1em;
  display:block;
}
.merit .merit_col li img:nth-of-type(2){
  border-radius:15px;
  width:45%;
}
@media screen and (max-width: 1024px) {
.merit header{
	aspect-ratio:100 / 101;
  background-image:url(../img/merit_title_sp.svg);
}
.merit h1{
	font-size:7vw;
}
.merit h2{
	font-size:7vw;
}

.merit .merit_col{
	display:block;
}
.merit .merit_col li{
  display:block;
	width:100%;
	font-size:3vw;
  margin-bottom:4em;
}
.merit .merit_col li img:nth-of-type(1){
  width:20%;
  float:left;
  margin-right:1em;
}
.merit .merit_col li div{
  width:100%;
  margin:1em 0;
}

.merit .merit_col li img:nth-of-type(2){
  width:100%;
}

}

.merit .why{
  background-color:#F2F2F2;
  padding:5em 2em 2em;
  border-radius:35px;
  color:#000;
  max-width:1000px;
  margin:7vw auto;
}
.merit .why h3{
  margin:auto;
  text-align:center;
  width:fit-content;
  transform: translateY(-11em);
  margin-bottom: -9em;
}
.merit .why strong{
  font-size:1.5em;
  text-align:center;
  display:block;
  margin-bottom:0.5em;

}
.merit .why p{
  text-align:left;
}

.merit .why strong b{
  color:#0099E2;
}
@media screen and (max-width: 1024px) {
.merit .why{
  margin:1em;
}
}
@media screen and (max-width: 768px) {
.merit .why{
  margin:0;
  margin-top:8em;
  padding:0 1em 2em;
}
.merit .why h3{
  transform: translateY(-5em);
  margin-bottom: -4em;
}
.merit .why h3 img{
  content:url(../img/zeh_title_sp.webp);
  margin-top:0;
  width:100%;
}
}

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

.about{
  background-image:url(../img/about_bg.webp);
  background-size:cover;
  background-color:#EDFFDF;
  background-position:bottom center;
  text-align:center;
  position:relative;
  padding-top:7vw;
}
.about .btn{
	position:absolute;
	top:-3vw;
	left:0;
	right:0;
  margin: auto;
  display: block;
  width:fit-content;
}
.about .btn:hover{
    transform: translateY(0.3vw) scale(0.99);
}

.about .btn img{
    margin: auto;
}
.about [src*="about_dot"]{
	margin:2em auto 0;
}
.about > p{
  font-size:2em;
  line-height:2;
  color:#FFF;
  border-top:2px solid #FFF;
  border-bottom:2px solid #FFF;
  max-width:1600px;
  width:90%;
  margin:auto;
  padding:1em;
}
.about .col{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:5px;
  max-width:1400px;
  margin:2em auto 0;
  @media screen and (max-width: 1480px) {
    max-width:1125px;
  }
}
.about .col li{
  width:49%;
  margin-bottom:5px;
}
.about .col li img{
  display:block;
}

@media screen and (max-width: 1200px) {
.about{
  padding-top: 12vw;
}
.about > p{
  font-size:1.5em;
}
.about .col li{
  width:49%;
}
}
@media screen and (max-width: 768px) {
.about{
  padding:6em 1em 40vw;
}
.about > p{
  font-size:16px;
  padding: 1em 0;
}
.about .btn{
  width:90%;
  margin:auto;
	top:-6vw;
}

.about .col{
  display:block;
}
.about .col li{
  width:auto;
  margin-bottom:1em;
}
.about .col li img{
  margin:0 auto;
}
.about img[src*="about_1"]{
  content:url(../img/about_1_sp.webp);
}
.about img[src*="about_2"]{
  content:url(../img/about_2_sp.webp);
}
.about img[src*="about_3"]{
  content:url(../img/about_3_sp.webp);
}
.about img[src*="about_4"]{
  content:url(../img/about_4_sp.webp);
}
.about img[src*="about_5"]{
  content:url(../img/about_5_sp.webp);
}
}

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

.point3{
  padding:0 0 1vw 0;
  background-image:url(../img/3point_bg.webp);
  background-size:cover;
  background-position:top center;
  position:relative;
}
@media screen and (max-width: 768px) {
.point3{
  background-image:url(../img/3point_bg_sp.webp);
  }
}
.point3 h1{
  background-color:#0099E2;
  color:#FFF;
  text-align:center;
  padding:1em;
}
.point3 h1 img{
  margin:auto;
  width:20em;
}

.point3 ul{
  display:flex;
  flex-wrap:wrap;
  width:70%;
  margin:5vw auto;
  justify-content:center;
  gap:10%;
}
.point3 ul li{
  width:45%;
}
.point3 ul li img{
  width:100%;
}
@media screen and (max-width: 768px) {
.point3 ul{
  display:block;
  margin:10vw auto;
}
.point3 ul li{
  width:100%;
  margin:2em auto;
}
}
.point3 > img{
  position:absolute;
}
.point3 > img[src*="3point_il1"]{
  left:22%;
  top:53%;
  width:10%;
}
.point3 > img[src*="3point_il2"]{
  right:23%;
  bottom:18%;
  width:8%;
}
@media screen and (max-width: 768px) {
  .point3 > img[src*="3point_il1"]{
    left: 15%;
    top: 38%;
    width: 21%;
  }
  .point3 > img[src*="3point_il2"]{
    right: 17%;
    bottom: 26%;
    width: 16%;
  }
}
/*----------------------------------------
相談会
----------------------------------------*/

.info{
  text-align:center;
  background-image:url(../img/info_bg.svg);
  background-size:cover;
  background-position:top center;
  background-repeat:repeat;
}
.info h1{
  text-align:center;
  margin-top:5vw;
}
.info h1 img{
  margin:auto;
  width:40em;
}
.info ul{
  margin:5vw auto;
  max-width:1200px;
  padding:1em;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:3%;
}
.info ul li{
	display:flex;
	align-items:center;
  width:30%;
  background-image:url(../img/info_f_bg.svg);
  background-size:cover;
  justify-content:center;
	aspect-ratio:100 / 49;
  padding:2em 1em;
  color:#1F9160;
  font-weight:bold;
  margin-bottom:3%;
  font-size:1.25em;
}
.info > img{
  margin:auto;
}
@media screen and (max-width: 1200px) {
.info ul li{
  width:48%;
}
}

@media screen and (max-width: 768px) {
.info{
  background-image:url(../img/info_bg_sp.svg);
  padding-top:5em;
}
.info h1 img{
  width:80%;
}

  .info > img[src*="point_img"]{
    content:url(../img/point_img_sp.webp);
    margin-bottom: 4em;
  }
  .info ul{
    display:block;
  }
  .info ul li{
    width:90%;
    margin:1em auto;
    padding:0;
  }
  .info ul li img{
    width:100%;
  }
  .info > img[src*="info_img"]{
    width:60%;
    margin-bottom:3em;
  }
}

/*----------------------------------------
失敗しないためのポイント
----------------------------------------*/
.point{
  background-image:url(../img/point_bg.webp);
  background-size:cover;
  padding:5vw 0;
  text-align:center;
}
.point .wrap{
  padding:5vw;
  max-width:100%;
  background-color:rgba(255,255,255,0.5);
}
.point strong{
  display:block;
  margin:1em 0;
  font-size:1.25em;
}
.point img{
  margin:auto;
}
.point p{
  margin:1em 0;
  line-height:2;
}
@media screen and (max-width: 1024px) {
.point .flow{
  content:url(../img/point_flow_tb.svg);
}
}
@media screen and (max-width: 768px) {
.point{
  padding:15vw 0;
}
.point .wrap{
  padding:5vw 0;
}
.point h1 img{
  content:url(../img/point_title_sp.svg);
}
.point .flow{
  content:url(../img/point_flow_sp.svg);
}
.point p{
  margin:1em 2em;
}
}

/*----------------------------------------
計画
----------------------------------------*/
.keikaku{
  background-image:url(../img/keikaku_bg.webp);
  background-size:cover;
}
.keikaku .wrap{
  max-width:1200px;
}
.keikaku h1{
  margin-bottom:3em;
}
.keikaku p{
  border-left:8px solid #A7A37F;
  padding-left:1em;
  line-height:2;
}
@media screen and (max-width: 768px) {
.keikaku{
  background-image:url(../img/keikaku_bg_sp.webp);
  padding:5em 1em;
}
.keikaku h1 img{
  content:url(../img/keikaku_title_sp.svg);
}
.keikaku p{
  border-left:none;
  padding-left:0;
  border-top:8px solid #A7A37F;
  padding-top:1em;
}
}


/*----------------------------------------
イベント
----------------------------------------*/

.event{
  padding:0 0 5vw 0;
  text-align:center;
  background-color:#E6FBFF;
}
.event h1{
  background-color:#0099E2;
  color:#FFF;
  text-align:center;
  padding:1em;
  font-size:2em;
  margin-bottom:4em;
}
.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;
  margin-bottom:3em;
}
.event article{
  position:relative;
  background-color:#FFF;
  display:flex;
  align-items:center;
  margin-bottom:2em;
  text-align:left;
  gap:2%;
}
.event article > img{
  width:5vw;
  margin-left:10vw;
}
.event article h3{
  color:#007AC6;
  font-size:calc(1em + 1.5vw);
  text-align:left;
  white-space:nowrap;
}
.event article p{
  font-size:calc(0.75em + 0.5vw);
}
.event article figure{
  width:25%;
  height:100%;
  margin-left:auto;
}
.event article figure img{
  width:100%;
  height:100%;
  object-fit:cover;
}

@media screen and (max-width: 1200px) {
.event article > img{
  margin-left: 5vw;
}
.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: 1024px) {
.event {
  border-bottom:2px solid #B9D1EA;
}
.event .happa1,
.event .happa2,
.event .happa3{
	display:none;
}
.event h1{
  font-size:5vw;
  padding:1em;
}
.event h2{
  font-size:8vw;
  margin-top:3em;
}
.event h2 img{
  content:url(../img/venue_t_sp.svg);
}
.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;
}
.event .col article .happa1{
  right:2vw;
  top:28vw;
  width: 6vw;
}
.event .col article .happa2{
  right:-7vw;
  top:27vw;
  width: 13vw;
}
.event .col article .happa3{
  right:0;
  bottom:-6vw;
  width: 15vw;
}
.event article{
  display:block;
  text-align:center;
  padding:1em 0 0;
}
.event article > img {
    width: 5em;
    margin-left: 0;
    margin:1em auto;
}
.event article h3 {
  text-align:center;
  font-size:1.5em;
  width: auto;
}
.event article p {
  font-size:1em;
  width: auto;
}
.event article figure {
  width:100%;
  margin-top:1em;
}
}
/*----------------------------------------
MODEL HOUSE
----------------------------------------*/
.model{
  text-align:center;
  padding-top:8vw;
}
.model h1{
  text-align:center;
  font-family: "BIZ UDPGothic", sans;
  font-weight:normal;
  font-size:4em;
  margin-bottom:0.5em;
}
.model p{
  font-family: "BIZ UDPGothic", sans;
  font-size:1.5em;
}
.model .col{
  max-width:1400px;
  margin:5em auto 0;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10%;
  @media screen and (max-width: 1480px) {
    max-width:1125px;
  }
}
.model .col article{
  width:43%;
  margin-bottom:10vw;
  position: relative;
  padding-bottom: 5em;
}
.model .col article img{
  width:100%;
  margin-bottom:1em;
}
.model .col article h3{
  font-size:2em;
  margin:1em;
}
.model .col article small{
  font-size:1rem;
  margin-bottom:1em;
  display:block;
}
.model .col article p{
  font-size:16px;
  text-align:left;
  display:block;
  margin-bottom:1em;
}
.model .col article a{
  display:block;
  margin:auto;
  padding:0.75em 3em;
  width:fit-content;
  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;
  color:#FFF;
  background-color:#FF3C3C;
  border-radius:2em;
}
.model .col article a:hover{
    transform: translateY(0.3vw) scale(0.99);
}
@media screen and (max-width: 1200px) {
.model .col{
  flex-wrap:wrap;
  gap:6%;
}
.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{
  padding:0.75em 1em;
  position:initial;
  margin-top:1em;
}
}


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