/*
Theme Name: Lighome
Author: office mei
Version: 1.0
*/

/*all
 ------------------------------------------*/
.pc-only{
	display: block;
}
.sp-only{
	display: none;
}
a{
	transition: .3s;
}
a:hover{
	opacity: .7;
}
@media screen and (max-width: 768px) {
.pc-only{
	display: none;
}
	.sp-only{
	display: block;
}
}
/* footer.php
 ------------------------------------------*/
	.btn-event{
    position: fixed;
    top: 148px;
    right: 0;
    z-index: 3;
	}
	.btn-event li{
		width: 119px;
		margin-bottom: 16px;
		padding: 45px 0 19px 0;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		font-size: 1.25rem;
	}
	.btn-event li a{
		position:relative;
		text-decoration: none;
		line-height: 1.2em;
	}
	.btn-event li:first-child a,
	.btn-event li:last-child a{
		color: #fff;
	}
	.btn-event li:nth-child(2) a{
	color: #65A8C2;
	}
	.btn-event li:first-child a:before{
	content: url(./assets/images/footer/icon__side-cta01.webp);
		position: absolute;
		top: -45px;
    left: -2px;
		right: 0;
		transform: scale(.5);
	}
	.btn-event li:nth-child(2) a:before{
	content: url(./assets/images/footer/icon__side-cta02.webp);
		position: absolute;
		top: -47px;
    left: -6px;
		right: 0;
		transform: scale(.5);
	}
	.btn-event li:last-child a:before{
	content: url(./assets/images/footer/icon__side-cta03.webp);
		position: absolute;
		top: -53px;
    left: 15px;
		right: 0;
		transform: scale(.5);	
	}
	.btn-event li:first-child{
		background-color: #F8A22D;
		border: 2px solid #F8A22D;

	}
	.btn-event li:nth-child(2){
		background-color: #fff;
		border: 2px solid #65A8C2;
	}
	.btn-event li:last-child{
		background-color: #65A8C2;
		border: 2px solid #65A8C2;
	}
#footer{
	background-color: #4C4F53;
	padding: 65px 35px 20px;
}
.footer-flex{
	display: flex;
  flex-direction: row-reverse;
	gap: 20px;
	margin: 0 0 180px;
	justify-content: space-between;
}
.footernav-footerbtn{
	display: flex;
  flex-direction: row-reverse;
	gap: 20px;
	justify-content:space-between;
	margin-top: 82px;
	width: 65%;
}
a.footer-logo img{
	width: 250px;
}
footer address{
text-align: left;
    margin-top: 30px;
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.4em;
    margin-bottom: 16px;	
}
.footer-tel{
	color: #fff;
    font-size: 1.125rem;
    display: block;
    text-align: left;
    margin-bottom: 16px;
}
.footer-address p{
	font-size: 1.125rem;
	color: #fff;
	line-height: 1.4em;
	text-align: left;
		margin-bottom: 60px;
}
.footer-address ul{
	text-align: left;
}
.footer-address ul li{
	margin-bottom: 10px;
}
.footer-address ul li a{
	color: #787878;
	font-size: .9375rem;
}
    #info {
        text-align: center;
        padding: 18px 15px 0;
		border-top: 1px solid #fff;
		max-width: 100%;
    }
#info a,
#info h3{
	color: #fff;  
}
#info h3{
	float:none;
	text-align: center;
}
.footernav{
	text-align: left;
	    display: flex;
    gap: 80px;
    line-height: 2.5em;
    font-size: .9375rem;
	letter-spacing: .05em;
	flex-wrap: wrap;
}
.footernav a{
	color: #fff;
}
.footerbtn li{
	margin-bottom: 14px;
}
.footerbtn a{
	width: 294px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 25px 0;
	font-size: 1rem;
	color: #65A8C2;
	font-weight: 600;
	position: relative;
	background-color:#fff;
	border-radius: 4px;
}
.footerbtn a:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #65A8C2;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 26px;
  bottom: 0;
  margin: auto;
}
.footerbtn a:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  right: 31px;
  bottom: 0;
  margin: auto;
}
.footersp-only{
	display: none;
}
@media screen and (max-width: 1199px) {
	.btn-event{
		display:none;
	}
}
@media screen and (max-width: 900px) {
	#footer{
		padding: 60px 15px 20px;
	}
	.footer-flex{
		display: block;
	}
	.footernav-footerbtn{
		display: block;
		margin: 0;
		    width: 100%;
	}
	.footerbtn a{
		margin: 0 auto;
	}
	.footernav{
	justify-content: center;
		display: block;
		width: 294px;
		margin:40px auto 0;
	}
	.footer-address{
	width: 294px;
    text-align: left;
    margin: 90px auto 0;	
	}
	.footer-flex{
	    margin: 0 0 120px;	
	}
	#info h3{
	text-align: left;
        line-height: 1.7em;
        padding: 24px 0 0;
	}
	.footersp-only{
		display: block;
	}
	.footer-address ul{
		display: none;
	}
	.footer-submenu li a{
		color: #787878;
	}
	#info{
		padding: 0;
	}
}
@media screen and (max-width: 768px) {
	.btn-event{
		display: block;
		top: auto;
		    bottom: 0;
		width: 100%;
	}
	.btn-event ul{
		display: flex;
		margin-bottom: 0;
		padding: 5px;
        background-color: rgba(255, 255, 255, .7);
		gap: 10px;
	}
	.btn-event ul li{
		margin-bottom: 0;
		font-size: .9375rem;
    width: 33%;
    border-radius: 4px;
		padding: 30px 0 7px 0;
	}
	.btn-event li:first-child a:before{
		top: -40px;
    left: -2px;
		transform: scale(.35);
	}
	.btn-event li:nth-child(2) a:before{
		top: -45px;
    left: -6px;
		transform: scale(.35);
	}
	.btn-event li:last-child a:before{
		top: -48px;
        left: 0;
        right: 0;
		transform: scale(.35);	
	}
}

/* header.php
 ------------------------------------------*/
body#index::after{
	content: none;
}
#index .wrap, #index #header, #index .content{
	max-width: 1440px;
    width: 100%;
    padding: 20px 2.43%;
}
#index #header a{
	max-width: 250px;
    display: block;
    width: 20%;
}
#index #hnav .navbtn{
	padding: 0 10% 0 10%;
    width: 100%;
    display: flex;
    gap: 2%;
    top: -80px;
    justify-content: flex-end;
    right: 0;
    flex-wrap: wrap;
}
#index .navbtn{
	text-align: center;
	overflow:visible;
	padding: 0;
	display: flex;
}
#index .navbtn a:not(.btn-tel){
	background-color: transparent;
}
#index .navbtn li:last-child a:not(.btn-tel){
	background-color: transparent;
	border: 1px solid #333;
	border-radius: 4px;
}
#index #hnav .navbtn li{
	width: calc(100%/6);
	max-width: 88px;
	text-align: center;
	padding: 0;
	display: block;
}
#index #hnav .navbtn li:last-child{
	    margin-left: 13px;
	max-width: 117px;
}
#index #hnav .navbtn li a{
	padding: 8px 0;
	font-size: clamp(0.813rem, 0.598rem + 0.45vw, 1rem);
	color: #333;
	display: block;
}
#index #hnav .navbtn li:first-child{
	max-width: 117px;
}
#index #header {
        min-height: auto;
    }
#index #mbtn{
	background: transparent;
    right: 0;
    top: 10px;
    z-index: 20;
}
#index #side{
	display: none;
	        background: transparent;
}

#index.on  #side{
	display: block;
	margin: 0;
}
body#index.on #mbtn a{
	background-image: none;
}
#index #mbtn a {
    position: absolute;
    display: block;
    width: 60px; /* アイコンの幅 */
    height: 60px; /* アイコンの高さ */
    cursor: pointer;
	background: none;
	text-indent: 0;
	right: 0;
}
body#index.on .mbtn-txt{
	display: none;
}
#index .mbtn-line {
    position: absolute;
    left: 30%;
    transform: translateX(-50%);
    width: 50px;
    height: 1px;
    background-color: #333;
    transition: all 0.3s ease;
}

#index .mbtn-line:nth-child(1) {
    top: 18px; /* 一番上のラインの位置 */
}

#index .mbtn-line:nth-child(2) {
    top: 28px; /* 真ん中のラインの位置 */
}


#index .mbtn-txt {
   position: absolute;
    bottom: 7px;
    left: 35%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #333;
    white-space: nowrap;
}
body#index.on .mbtn-line:nth-child(1) {
    top: 28px;
    transform: translateX(-50%) rotate(45deg);
}

body#index.on .mbtn-line:nth-child(2) {
     top: 28px;
    transform: translateX(-50%) rotate(-45deg);
}
body#index.on .mbtn-line{
	background-color: #fff;
}
#index #side.on{
	webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
#index #side {
    position: fixed;
    top: 0;
    right: 0;
    margin-right: -90%;
    z-index: 12;
    width: 90%;
    height: 100%;
    padding: 10px;
    background: #fff;
    overflow: hidden;
    overflow-y: auto;
    -webkit-transition: .2s;
    transition: .2s;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
#index.on #side{
	padding: 0;
}
#index #side .footernav ul li{
	line-height: 2.5em;
}
/*mainvisual start---------------------------------------*/

/* 紙芝居風に前の画像がスライドして退く */
.top-slider .swiper-slide {
  opacity: 0 !important; /* デフォルトは非表示 */
  transform: translateX(0);
  transition: transform 1s ease, opacity 1s ease;
}

.top-slider .swiper-slide-active {
  opacity: 1 !important;
  transform: translateX(0);
  z-index: 2;
}

.top-slider .swiper-slide-prev {
  opacity: 1 !important; 
  transform: translateX(-100%); /* 前の画像を横に退場 */
  z-index: 1;
}

.top-slider .swiper-slide img {
  transition: transform 12s ease; /* ゆっくり拡大 */
  width: 100%;   /* 横幅は画面幅いっぱい */
  height: auto;  /* デフォルトでは高さ自動 */
  object-fit: cover; /* はみ出す部分はトリミング */
}

.top-slider .swiper-slide-active img {
  transform: scale(1.05); /* 表示中は1.05倍 */
}
.top-slider .swiper-pagination{
	    padding-right: 80px;
    padding-bottom: 40px;
	text-align: right;
}
.top-slider .main-visual-text{
	position: absolute;
    height: auto;
    top: auto;
    bottom: 103px;
    z-index: 99;
    left: 84px;
    right: auto;
    margin: 0 auto;
    font-size: 3.75rem;
    color: #fff;
    line-height: 1.4em;
    letter-spacing: .1em;
    font-weight: 600;
    font-style: normal;
    text-align: left;
}
.top-slider .swiper-pagination-bullet{
	background: #bbb;
	opacity: 1;
}
.top-slider .swiper-pagination-bullet-active{
	background: #fff;
}
/* --- 768px以下のとき画像の高さを固定する --- */
@media (max-width: 768px) {
  .top-slider .swiper-slide img {
    min-height: 676px;   /* 高さ固定 */
	  aspect-ratio: 375 / 676;
    object-fit: cover; /* 縦横比を維持しつつ中央でトリミング */
  }
	.swiper-container.top-slider{
		height: auto;
	}
	.top-slider .main-visual-text{
		font-size: 2.5rem;
    left: 15px;
    bottom: 70px;
		line-height: 1em;
	}
	.top-slider .main-visual-text span{
		font-size: 1.875rem;
	}
	.top-slider .swiper-pagination{
	    padding-right: 0;
    padding-bottom: 16px;
	text-align: center;
}
}

/*mainvisual end---------------------------------------*/

/*top__content-slider start---------------------------------------*/

/* Swiper container */
.my-image-carousel {
    /* To create the partial view effect for the 1440px range */
    padding-left: 10%;
    padding-right: 10%;
    overflow: visible; /* Hide the extra parts of the slides */
}

/* Image sizing and aspect ratio */
.my-image-carousel img {
    display: block;
    /*max-width: 360px; /* Each image will not exceed 360px */
    width: 100%;
    height: auto;
    object-fit: cover;
}
.my-image-carousel .swiper-pagination-bullets.swiper-pagination-horizontal{
	bottom: -30px;
}
.my-image-carousel .swiper-pagination-bullet-active {
  background: #65A8C2 !important;  /* オレンジに変更 */
}
/* 769px to 1440px: The partial view */
@media (min-width: 769px) and (max-width: 1440px) {
    .my-image-carousel {
        padding-left: 10%;
        padding-right: 10%;
    }
    .my-image-carousel .swiper-slide {
        /*
         * Each slide takes up a quarter of the visible space.
         * The `!important` rule overrides Swiper's inline styles.
         */
        /*width: 25% !important;*/
    }
}

/* 1441px and up: Full view with 4 slides */
@media (min-width: 1441px) {
    .my-image-carousel {
        padding: 0; /* No padding */
    }
    .my-image-carousel .swiper-slide {
        /* Swiper's slidesPerView will handle the width here */
       /* width: auto !important;*/
    }
}

/* 768px and down: 1 slide */
@media (max-width: 768px) {
    .my-image-carousel {
        padding: 0;
    }
    .my-image-carousel .swiper-slide {
        width: 100% !important;
    }
	.my-image-carousel img {
    display: block;
    max-width: 260px; /* Each image will not exceed 360px */
    width: 100%;
    height: auto;
    object-fit: cover;
}
}
/*top__content-slider end---------------------------------------*/

/*無料相談会バナー start---------------------------------------*/
#index .content.bnr__free-consulting{
	max-width: 600px;
	width: 100%;
	margin: 88px auto;
}
/*Event start---------------------------------------*/
#index #event h2,
.top__section-service01 h2,
.top__works h2,
.top__news h2,
.top__blog h2,
.top__column h2,
.top__sns h2{
	position: static;
	text-align: center;
	font-size: 1.25rem;
	width: 100%;
	line-height: 2em;
	margin-bottom: 80px;
	padding: 0;
	overflow:visible;
}

#index #event h2 span,
.top__section-service01 h2 span,
.top__works h2 span,
.top__news h2 span,
.top__blog h2 span,
.top__column h2 span,
.top__sns h2 span{
	font-family: "Lato", sans-serif;
	font-size: 3rem;
	color: #65A8C2;
	display: block;
}
#index #event .content::after{
	box-shadow: none;
}
#index #iemiru-cms-index-page .index-page__events-event.is-horizontal{
	width: 30%;
    margin-left: 1.5%;
    margin-right: 1.5%;
    margin-bottom: 58px;
    min-height: 140px;
    float: left;
    min-width: 220px;
    padding: 0;
    border: 1px solid #333;
    border-radius: 0;
	position:relative;
}
#index #iemiru-cms-index-page .index-page__events-event.is-horizontal:before{
	content: url(./assets/images/front/top__event-reception-logo.webp);
	position: absolute;
    top: -83px;
    right: -33px;
    z-index: 1;
    transform: scale(.5);
}
#index #iemiru-cms-index-page .index-page__events-event.is-horizontal .index-page__events-event-content{
	padding: 0 10px 10px 10px;
}
#index #js-iemiru-cms-index-page{
	margin-bottom: 24px;
}
#index a[class*="a-btn"] {
    padding: 28px 0;
    font-size: 1rem;
    min-width: 200px;
    background: #65a8c2;
    color: #fff;
    -webkit-transition: .2s;
    transition: .2s;
    text-align: center;
    max-width: 378px;
    width: 100%;
    border-radius: 4px;
    font-weight: 500;
}
#index a[class*="a-btn"]::before{
	content: url(./assets/images/front/top__btn-arrow.webp);
    position: absolute;
    top: 6px;
    right: 30px;
    transform: scale(.5);
    background: none;
}
#index #iemiru-cms-index-page .index-page__events-event.is-horizontal .index-page__events-event-image-wrapper{
	aspect-ratio: 312 / 198;
}


/*Service start---------------------------------------*/
.top__section-service01 h2{
	margin-bottom: 65px;
}
.top__section-service01_bg{
	background-color: #FEFCF7;
	padding: 88px 35px;
}
.section-service01-content{
	max-width: 1016px;
	width:100%;
	margin: 0 auto;
	display: flex;
	gap: 30px;
}
.section-service01-content .img{
	max-width: 470px;
	width: 48%;
}
.section-service01-content ul{
	width: 52%;
	    min-width: 510px;
}
.section-service01-content ul li{
	margin-bottom: 30px;
}
.section-service01-content ul a{
	    text-decoration: none;
    font-size: 1.5rem;
    color: #333;
    display: flex;
    line-height: 1;
    position: relative;
    padding-right: 55px;
}
.section-service01-content ul a:after{
	content: url(./assets/images/front/top__section-service01-arrow.webp);
	position: absolute;
    top: -13px;
    right: -5px;
    transform: scale(.5);
}
.section-service01-content ul a span{
	color: #65A8C2;
	padding-right: 5px;
	margin-right: 5px;
	border-right: 1px solid #65A8C2;
}
.top__section-service-bg{
	padding: 88px 35px;
	max-width: 1086px;
	width: 100%;
	margin: 0 auto;
}
#service02{
	display: flex;
	gap: 10%;
	
	position:relative;
}
#service02 .img,
#service02 .text{
	width: 50%;
}
#service02 .img img{
max-width: 602px;
    position: absolute;
    right: -182px;
    top: 140px;
    width: 60%;
}
.top__section-service-bg h3{
	background: none;
	font-size: 2rem;
	margin-bottom: 20px;
	font-weight: 400;
	border-top: none;
	padding: 0;
}
.top__section-service-bg h3 span{
	border-bottom: 2px solid #65A8C2;
	padding-bottom: 5px;
	line-height:1.5em;
}
.top__section-service-bg p{
	font-size: 1rem;
	letter-spacing: .05em;
}
.top__section-service-bg .rule{
	margin-bottom: 32px;
}
.top__section-btn a{
	background-color: #fff;
	border: 1px solid #65A8C2;
	text-decoration: none;
	max-width: 378px;
	width: 100%;
	padding:26px 0;
	border-radius: 4px;
	position: relative;
	color: #65A8C2;
	font-size: 1rem;
	display: flex;
	justify-content: center;
}
.top__section-btn a:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #65A8C2;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 26px;
  bottom: 0;
  margin: auto;
}
.top__section-btn a:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  right: 31px;
  bottom: 0;
  margin: auto;
}
#service03{
	padding:0;
	max-width: 1016px;
	display: flex;
	flex-direction: row-reverse;
	position:relative;
	margin-bottom: 12%;
}
#service03 .img img {
    max-width: 602px;
    position: absolute;
	left: -182px;
    top: 50px;
    width: 60%;
}
#service03 .img{
	width: 50%;
}
#service03 .text {
    width: 50%;
}
#service03 ul{
	display: flex;
	gap: 1%;
	margin-bottom: 32px;
}
#service03 ul li{
	background-color: #65A8C2;
	font-size: clamp(0.75rem, 0.607rem + 0.3vw, 0.875rem);
	letter-spacing: .05em;
	color:#fff;
}
#service03 ul li span{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 14px;
	margin: 2px;
	border: solid 1px #fff;
}
#service04 ul{
	max-width: 910px;
	gap: 20px;
	display:flex;
	justify-content: space-between;
	margin-top: 32px;
	width: 100%;
	margin: 0 auto 40px;
}
#service04 ul li{
	width: calc(100% / 2);
	max-width: 432px;
	position:relative;
}
#service04 ul li p{
	position:absolute;
	bottom: 0;
	right:0;
	font-size: 1rem;
	color: #fff;
	letter-spacing: .05em;
	background-color:#65A8C2;
	display: inline;
	padding: 12px 14px;
	margin:0;
}
#service04 ul li img{
	vertical-align: bottom;
	margin: 0;
}
#service04 .top__section-btn a,
#service05 .top__section-btn a{
	margin: 0 auto;
}
.top__section-service-bg#service05{
	padding:0;
} 
#service05 h3,
#service05 p{
	text-align: center;
}
.top__section-service05-bnr{
	max-width: 680px;
	width: 100%;
	margin: 0 auto 32px;
}

/*Works start---------------------------------------*/
.top__works{
	padding: 88px 35px;
}
.top__works-list{
	display: flex;
}
.top__works h2{
	width: 200px;
	flex-shrink: 0;
	text-align: left;
	padding-left: 0;
}
.top__works .works-items{
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	justify-content: center;
}
.top__works .works-items li{
	width: calc(90%/2);
	position: relative;
	max-width: 442px;
}
.top__works .works-items li img{
	aspect-ratio: 442 / 282;
	width: 100%;
	object-fit: cover;
	margin: 0;
}
.top__works .works-items li h3{
	background: none;
	position: absolute;
	bottom: 8px;
	left: 0;
	border-top: none;
	margin-bottom: 0;
	background-color: rgba(106,143,157,.6);
	color: #fff;
	font-size: .875rem;
	letter-spacing: .05em;
	font-weight: 400;
}
.top__works .top__section-btn a{
	margin: 36px auto 0;
}
/*News Blog start---------------------------------------*/
.section__top-article-bg{
	background-image: url(./assets/images/front/top__sec-article-bg.webp);
	padding: 88px 35px;
	background-size: cover;
	background-repeat: no-repeat;
}
.top__news h2,
.top__column-bg h2{
	position: static;
	width: 100%;	
}
.section__top-article{
	max-width: 1016px;
    margin: 0 auto;
    display: flex;
    text-align: left;
	gap: 80px;
}
.top__news,
.top__blog{
	width: 50%;
}
.top__news h2,
.top__blog h2{
	margin-bottom: 30px;
	text-align: left;
	padding: 0;
}
.top__news .newlist li{
	padding:15px 0;
	border-bottom: 1px solid #bbb;
}
.top__news .newlist span{
	display: block;
	font-size: .75rem;
	margin-right: 25px;
}
.top__news .newlist p{
font-size: .875rem;
	  white-space: nowrap; /* テキストを強制的に一行に表示 */
  overflow: hidden;    /* はみ出したテキストを非表示に */
  text-overflow: ellipsis; /* 省略されたテキストを「...」で表示 */
  max-width: 380px;
  width: 100%;
	margin: 0;
}
.top__news .newlist a{
	text-decoration: none;
	color: #333;
	display: flex;
}
.section__top-article .link{
	    background: none;
    text-decoration: none;
    color: #333;
    font-size: .875rem;
    padding: 0 0 0 24px;
	position: relative;
}
.section__top-article .more{
	text-align: left;
}
.section__top-article .link:before{
	content: '';
  width: 18px;
  height: 18px;
  background: #65A8C2;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.section__top-article .link:after{
	content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  left: 7px;
  bottom: 0;
  margin: auto;
}
.top__blog .newlist img{
	display: block;
	aspect-ratio: 80/54;
	object-fit: cover;
	object-position: center;
	width: 80px;
}
.top__blog .newlist li{
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #bbb;
}
.top__blog .newlist li a{
	display: flex;
	gap: 8px;
	text-decoration: none;
	color: #333;
}
.tp__blog-text p{
	margin: 0 0 8px;
	font-size: .875rem;
	line-height: 1.5em;
}
.tp__blog-text span{
	font-size: .75rem;
}
.top__blog{
	padding-bottom: 5px;
}
/*Column start---------------------------------------*/
.top__column-bg{
	background-color: #FEFCF7;
	padding: 88px 35px;
}
.top__column-bg h2{
	margin-bottom: 45px;
}
.top__column-bg .column-list{
	    display: flex;
    gap: 40px;
    max-width: 1016px;
    margin: 0 auto 48px;
}
.top__column-bg .column-list li{
	width: calc(100% / 3);
	max-width: 312px;
	background-color: #fff;
	text-align: left;
	border: 1px solid #333;
}
.top__column-bg .column-list li img{
	aspect-ratio: 312 / 190;
	width: 100%;
	object-fit: cover;
}
.top__column-bg .top__section-btn a{
	margin: 0 auto;
}
.top__column-bg .column-list li a .thumb{
	width: 100%;
    aspect-ratio: 312 / 190;
    overflow: hidden;
    margin-bottom: 0;
}
.top__column-text{
	padding: 16px 8px 32px 8px;
}
.column-list li a .top__column-text a .date{
	margin-bottom: 15px;
}
.column-list li a .top__column-text .title{
	line-height: 1.5em;
	font-weight: 600;
}
/*content-menu start---------------------------------------*/
.top__content-menu{
	padding: 88px 35px;
}
.top__content-menu ul{
	max-width: 1016px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	gap: 1px;
}
.top__content-menu ul li{
	width: calc( 100% / 3);
	position: relative;
}
.top__content-menu ul li img{
	margin: 0;
}
.top__content-menu ul li p{
	position: absolute;
    top: 42%;
    left: 0;
    right: 0;
    background-color: #65A8C2;
    text-align: center;
    color: #fff;
    padding: 16px;
    margin: 0;
}
.top__content-menu ul li a{
		letter-spacing: .05em;
	font-size: 1.25rem;
	text-decoration: none;
}
/*sns start---------------------------------------*/
.top__sns{
	padding: 88px 35px 88px;
}
.top__sns h2{
	margin-bottom: 48px;
}
.top__sns ul{
	max-width: 1016px;
	width: 100%;
	margin: 0 auto;
	gap: 40px;
	display: flex;
}
.top__sns ul li{
	width: calc( 100% / 3);
}
.top__sns ul li a{
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: #fff;
	font-weight: 500;
	font-size: clamp(1.125rem, 0.122rem + 2.09vw, 2rem);
	font-family: "Lato", sans-serif;
	position:relative;
	background-color: #65A8C2;
	padding-left: 30px;
	height: 84px;
}
.top__sns ul li:first-child a:before{
	content: url(./assets/images/front/icon_top-line.webp);
	position: absolute;
	top: 0;
	left: -35%;
	right: 0;
	transform: scale(.5);
}
.top__sns ul li:nth-child(2) a:before{
	content: url(./assets/images/front/icon_top-instagram.webp);
	position: absolute;
	top: 2%;
    left: -62%;
	right: 0;
	transform: scale(.5);
}
.top__sns ul li:nth-child(3) a:before{
	content: url(./assets/images/front/icon_top-youtube.webp);
	position: absolute;
	top: 10%;
    left: -55%;
	right: 0;
	transform: scale(.5);
}
	#header img{
		min-width: 117px;
	}
@media screen and (max-width: 1004px) {
	#index #hnav .navbtn{
		gap: 0;
		top: -85px;
	}
	#index #hnav .navbtn li{
		max-width: 80px;
	}
	#index #hnav .navbtn li:last-child{
		max-width: 88px;
	}
}
@media screen and (max-width: 900px) {
	#index #side #footer{
		max-width: 375px;
		padding: 150px 15px 20px;
	}	
	#index.on #side{
		width:375px;
	}

}
@media screen and (max-width: 768px) {
	#index .wrap, #index #header, #index .content{
		padding: 15px;
	}
	#index #mbtn{
	top: 0;	
	}
	/*top__content-slider start---------------------------------------*/
	  .my-image-carousel .swiper-slide {
    width: calc(100% / 3)!important; /* 3枚表示なので、全体の1/3の幅 */
    /* または、具体的なpx指定でも可。ただし、両端フレームアウトを考慮して調整 */
  }
	/*top__content-slider end---------------------------------------*/
	.bnr__free-consulting img{
		margin: 0;
	}
	#index .content.bnr__free-consulting{
	    margin: 64px auto;	
	}
	#index #event h2,
.top__section-service01 h2,
.top__works h2,
.top__news h2,
.top__blog h2,
.top__column h2,
	.top__sns h2{
	margin-bottom: 36px;
	}
	#iemiru-cms-index-page.is-middle .index-page__events-event.is-horizontal{
		    margin-bottom: 60px;
	}
	#js-iemiru-cms-index-page{
		margin-bottom: 0;
	}
	#index section.top__section-service{
		margin-top: 64px;
	}
	.top__section-service01_bg{
		    padding: 64px 15px;
	}
.top__section-service01 h2 {
    margin-bottom: 56px;
}
	.section-service01-content{
		display: block;
	}
	.section-service01-content .img{
    max-width: 100%;
    width: 100%;
	}
	.section-service01-content .img img{
		margin: 0;
	}
	.section-service01-content ul {
    width: 100%;
    min-width: 100%;
    margin-top: 40px;
}
	.section-service01-content ul a{
		    padding-right: 40px;
		max-width: 375px;
		font-size: 1.125rem;
		width: 100%;
        margin: 0 auto;
	}
	#service02 .img img,
	#service03 .img img{
		position: static;
		width: 100%;
		max-width: 100%;	
	}
	.top__section-service-bg{
	margin: 0 auto;
		padding: 64px 15px;
	}
	.top__section-service-bg img{
		margin: 0;
	}
	#service02 .img, #service02 .text,
	#service03 .text{
		    width: 100%;
	}
	#service02 .img,
	#service03 .img{
		margin-bottom: 39px;
	}
	#service03{
		display: block;
	}
	#service03 .img{
		width: 100%;
		margin-bottom: 39px;
	}
	#service04 ul li p{
	font-size: .875rem;
	padding: 5px 12px;
	}
	.top__works-list{
		display: block;
	}
	.top__works {
    padding: 64px 15px;
}
	.top__works .works-items{
	    gap: 20px;
	}
	.top__works .works-items li:last-child{
		width: 100%;
	}
	.section__top-article{
	display: block;	
	}
	.section__top-article-bg{
		padding: 64px 15px;
	}
	.top__news,
	.top__blog{
	width: 100%;
    max-width: 550px;	
		overflow: visible;
	}
	#index section.top__news{
		margin-bottom: 80px;
	}
	.top__column-bg,
	.top__content-menu,
	.top__sns{
		padding: 64px 15px;
	}
	.top__column-bg .column-list{
	    gap: 10px;	
	}
	.top__column-text {
    padding: 10px 5px 15px 5px;
}
	.top__content-menu ul li p{
padding: 10px 5px;
	}
	.top__content-menu ul li a{
		    font-size: 1rem;
	}
	.top__sns ul{
		gap: 10px;
}
}
@media screen and (max-width: 580px) {
	#iemiru-cms-index-page .index-page__events-event.is-horizontal:before{
 top: -50px;
    right: -43px;
	}
	#index #event h2, .top__section-service01 h2, .top__works h2, .top__news h2, .top__blog h2, .top__column h2, .top__sns h2{
		font-size: 1.125rem;
		margin-bottom: 26px;
	}
	#index #event h2 span, .top__section-service01 h2 span, .top__works h2 span, .top__news h2 span, .top__blog h2 span, .top__column h2 span, .top__sns h2 span{
		font-size: 2.5rem;
	}
	.section-service01-content ul a{
		font-size: 1rem;
		font-weight: 600;
	}
	.section-service01-content ul a:after{
	top: -17px;
    right: -5px;
    transform: scale(.4);	
	}
	.top__section-service01_bg{
		padding: 34px 15px;
	}
	.top__section-service-bg h3{
		font-size: 1.25rem;
	}
	.top__section-service-bg{
	padding: 34px 15px;	
	}
	.top__section-btn a{
		padding: 18px 0;
	}
	#service05 h3,
	#service05 p{
		text-align: left;
	}
	 .top__works .works-items {
        gap: 10px;
    }
	    .top__works {
        padding: 34px 15px;
    }
	.top__news .newlist a{
	display: block;	
	}
	.top__news .newlist span{
	    margin-bottom: 8px;	
	}
	.top__column-bg .column-list{
		display: block;
	}
	.top__column-bg .column-list li{
	width: 100%;
	margin: 0 auto 30px;	
	}
	.top__column-bg, .top__content-menu, .top__sns{
		        padding: 34px 15px;
	}
	.top__content-menu ul{
		display: block;
	}
	.top__content-menu ul li{
		width: 100%;
		margin-bottom: 15px;
	}
	.top__content-menu ul li p {
        padding: 15px 5px;
    }
	.top__content-menu ul li a{
		font-size: 1.25rem;
	}
	.top__sns ul{
	    display: block;	
	}
	.top__sns ul li {
    width: 100%;
    max-width: 312px;
		margin: 0 auto 10px;
}
	.top__sns ul li a{
		padding-left: 10px;
}
	.top__sns ul li:first-child a:before{
	top: 2px;
    left: -25%;
    transform: scale(.3);	
	}
	.top__sns ul li:nth-child(2) a:before{
		left: -42%;
		transform: scale(.3);
}
	.top__sns ul li:nth-child(3) a:before{
		left: -38%;
		transform: scale(.3);
}
	.footer-flex{
	margin: 0 auto 180px;
    justify-content: space-between;
    max-width: 1440px;
    width: 100%;	
	}
}