@charset "utf-8";

/* 
Theme Name: ステップハウス有限会社
Description: ステップハウス有限会社様用のテンプレートです
Version: 1.0
Author: A.Okawa
*/

/* * {
    box-sizing: border-box
} */

img {
    height: auto;
    width: 100%;
}

.forSp {
    display: none;
}


@media screen and (max-width: 768px) {
    .forPc {
        display: none !important;
    }

    .forSp {
        display: block !important;
    }
}

/* ************ ↓↓↓↓↓↓　共通　start ↓↓↓↓↓↓　************ */
/* フォント */
.zen-old-mincho-regular {
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    font-style: normal;
    }

.zen-old-mincho-bold {
font-family: "Zen Old Mincho", serif;
font-weight: 700;
font-style: normal;
    }
.zen-kaku-gothic-new-light {
font-family: "Zen Kaku Gothic New", serif;
font-weight: 300;
font-style: normal;
}

.zen-kaku-gothic-new-regular {
font-family: "Zen Kaku Gothic New", serif;
font-weight: 400;
font-style: normal;
}

.zen-kaku-gothic-new-medium {
font-family: "Zen Kaku Gothic New", serif;
font-weight: 500;
font-style: normal;
}

.zen-kaku-gothic-new-bold {
font-family: "Zen Kaku Gothic New", serif;
font-weight: 700;
font-style: normal;
}

.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

body{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    letter-spacing: 0.02em;
}

/* // // // // ふわっと // // // // */
.fUp{
	opacity: 0;
	transition: 1s;
	transform: translateY(60px);
}
.fUp.active{
	opacity: 1;
	transform: translateY(0px);
}
/* ************　↑↑↑↑↑↑　共通　fin ↑↑↑↑↑↑　************ */


/* ************ ↓↓↓↓↓↓　COMMON　start ↓↓↓↓↓↓　************ */
html {
    font-size: 62.5%;
    color: #414656;
}
#topPage{
    font-size: 1.6rem;
}
.mincho{
    font-family: "Zen Old Mincho", serif;
}
.bold{
    font-weight: 700;
}
.font14{
    font-size: clamp(10px, 1.3vw ,14px);
}
.font16{
    font-size: clamp(12px, 1.5vw ,16px);
}
.font18{
    /* font-size: 18px; */
    font-size: clamp(14px, 1.8vw ,18px);
    /* min 14px スクリーン768pxで止める */
}
.font24{
    /* font-size: 24px; */
    font-size: clamp(18px, 2.3vw , 24px);
    /* min18px 768px */
}
.font32{
    /* font-size: 32px; */
    font-size: clamp(24px, 3.1vw , 32px);
}
.font40{
    font-size: clamp(30px, 3.9vw ,40px);
}
.font48{
    font-size: clamp(32px, 4.1vw ,48px);
}
h3{
    font-size: clamp(2rem, 5.3vw ,2.4rem);
    /* font-family: "Zen Old Mincho", serif; */
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.2em;
    line-height: 1.3;
    position: relative;
    z-index: 5;
    padding-bottom: clamp(1.5rem, 4vw ,4rem);
}
h3 span{
    font-size: 200%;
    color: #00428E;
}

.wrapWidth {
	width: 100%;
	margin: 0 auto;
}
.boxWidth {
	width: 96%;
	max-width: 1200px;
	margin: 0 auto;
}

a.contactBtn02{
    width: 350px;
    margin: 0 auto;
    padding: 0 10px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: 0.9s;
    position: relative;
    z-index: 0;
    margin-top: clamp(2rem, 5.3vw ,7rem);
}
a.contactBtn02::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    left: 0;
    transition: 0.5s;
    background: #00428E;
background: linear-gradient(90deg, rgba(0, 66, 142, 1) 0%, rgba(119, 155, 255, 1) 100%);
}

a.contactBtn02::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    left: 0;
    background: #779BFF;
background: linear-gradient(90deg, rgba(119, 155, 255, 1) 0%, rgba(0, 66, 142, 1) 100%);
}
a.contactBtn02:hover::before{
    opacity: 0;
}
a.contactBtn02 p{
    display: flex;
    align-items: center;
    letter-spacing: 0.1em;
}
a.contactBtn02 p::after{
    content: url('./img/moreBtn_white.svg');
    padding: 1px 10px;
}
section#news, section#message, section#information, section#instagram, section#voice, 
section#company, section#contact, section#link, section#newsTop, section#newsCategory, 
section#newsSingle, section#notfound, section#privacy{
    padding-top: clamp(5rem, 8vw ,6rem);
    padding-bottom: clamp(3rem, 8vw ,6rem);

}

/*========== FLEX BOX ==========*/
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.flex-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.flex-center {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.flex-left {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}


.topPageLink{
    border-bottom: #000 solid 1px;
    text-align: center;
    padding: 0 3px 0 1px;
}
.topPageLink:hover{
    color: #bbb;
    transition: .5s;
    border-bottom: #bbb solid 1px;
}
/* ****** パンクズリスト ****** */
.c-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: #6C6C6C;
    line-height: 3.2;
}
@media screen and (max-width: 768px) {
.c-breadcrumbs {
    font-size: 0.8125rem;
}
}
.c-breadcrumbs > li {
display: inline-block;
position: relative;
}
.c-breadcrumbs > li:not(:last-of-type)::after {
content: ">";
display: inline-block;
margin-right: 0.5em;
margin-left: 0.5em;
}


/* ************　↑↑↑↑↑↑　COMMON　fin ↑↑↑↑↑↑　************ */

/* ************ ↓↓↓↓↓↓　Header　start ↓↓↓↓↓↓　************ */
header{
    position: fixed;
    z-index: 10;
    width: 100%;
    top: 0;
}
header .contactSp{
    position: fixed;
    bottom: 0;
    width: 100%;
}
header .contactSp p{
    margin: 0 auto;
    font-size: clamp(1.6rem, 4.2vw ,2rem);
    letter-spacing: 0.2rem;
}
header .headerWrap{
    background-color: #fff;
    height: 50px;
    align-items: center;
}
header .topLogo{
    width: 200px;
}
header .topLogo h1 a{
    display: flex;
    align-items: center;
    height: 50px;
}
/* header .topnavWrap,  */
header .topNav{
    gap: 1.8rem;
    padding-right: 15px;
}
header .topNav{
    font-size: clamp(1.3rem, 1.7vw ,1.5rem);
    color: #1D242F;
    letter-spacing: 0.1rem;
    align-items: center;
    transition: 0.5s;
}
header .topNav li{
    transition: 0.5s;
}
header .topNav li:hover{
    color: #999;
}
a.igBtn{
    width: 50px;
    transition: 0.5s;

}
a.igBtn:hover{
    opacity: 0.7;
}
a.igBtn.forSp{
    position: relative;
    right: 50px;
}
a.contactBtn{
    padding: 0 10px;
    height: 50px;
    display: flex;
    align-items: center;
    color: #fff;
    transition: 0.9s;
    position: relative;
    z-index: 0;
    
}
a.contactBtn::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    left: 0;
    transition: 0.5s;
    background: #00428E;
background: linear-gradient(90deg, rgba(0, 66, 142, 1) 0%, rgba(119, 155, 255, 1) 100%);
}
a.contactBtn::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    left: 0;
    background: #779BFF;
background: linear-gradient(90deg, rgba(119, 155, 255, 1) 0%, rgba(0, 66, 142, 1) 100%);
}
a.contactBtn:hover::before{
    opacity: 0;
}
a.contactBtn p{
    display: flex;
    align-items: center;
    font-size: clamp(1.3rem, 1.7vw ,1.5rem);
}
a.contactBtn p::before{
    content: url('./img/mail_icon.svg');
    padding: 1px 10px;
}

/* ************ ↑↑↑↑↑↑　Header　fin ↑↑↑↑↑↑　************ */


/* /////////////////////////////////////////////////////////// */
/* ********** ハンバーガーメニュー ********** */
/* /////////////////////////////////////////////////////////// */

/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:-120%;
    left:0;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:#1C45B6;
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    top: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center; 
    font-size: 14px;
}

#g-nav li a{
	color: #fff;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
    /* hoverで下線表示 */
    position: relative;
}

#g-nav li a:hover{
    color: #999;
    transition: .5s;
}



#g-nav li.hambMenu{
    font-size: 20px;
    padding: 10px 0;
}
#g-nav li:nth-of-type(5){
    padding-bottom: 30px;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
    /* background: #433F34; */
    background-color: none;
	top:0px;
	right: 0px;
	cursor: pointer;
    width: 50px;
    height:50px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 2px;
	/* background-color: #AC977B; */
    background-color: #999;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

/* ************ ↓↓↓↓↓↓　TOPVIEW　start ↓↓↓↓↓↓　************ */
#topView{
    position: relative;
    padding-top: 50px;
}
#topView h2{
    font-size: clamp(3rem, 3.8vw ,7.2rem);
    line-height: 1.5;
    position: absolute;
    right: 3%;
    bottom: 10%;
    /* transform: translate(0%, -50%);  */
    /* 中央に補正 */
    color: #fff;
    text-align: right;
    /* filter:  drop-shadow(2px 2px 20px rgba(0, 0, 0, 0.6)) 
    drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.2)); */
}
#topView h2 p{
    /* background-color: #00428B; */
    margin: 1% 0;
    /* padding: 0 20px; */
}
#topView h2 p span{
    background-color: #00428B;
    /* padding: 0.2em 0.6em; */
    padding-left: 0.6em;
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
#topView h2 br.topviewBr{
    display: none;
}
@media screen and (max-width: 1200px) {
    #topView h2{
        font-size: clamp(3rem, 4.5vw ,4rem);
        /* right: 0; */

    }
}
@media screen and (max-width: 599px) {
    #topView h2{
        font-size: clamp(2.2rem, 5.2vw ,4rem);
        writing-mode: vertical-rl;
        text-align: left;
        line-height: 2.2;
        bottom: 0%;
        top: 13%;
        right: 5%;
    }
        #topView h2 p{
        margin: 0 1%;
    }
    #topView h2 p span{
    padding: 0.2em;
}
    #topView h2 br.topviewBr{
    /* display: block; */
}
}
/* ************ ↑↑↑↑↑↑　TOPVIEW　fin ↑↑↑↑↑↑　************ */


/* ************ ↓↓↓↓↓↓　NEWS　start ↓↓↓↓↓↓　************ */
ul.newsList{
    width: clamp(300px, 90vw ,600px);
    border-top: 1px solid #1C45B6;
    border-bottom: 1px solid #1C45B6;
    padding: 5px 0;
}
ul.newsList p{
    /* padding-left: 30px; */
    width: 73%;
}
ul.newsList time{
    width: 25%;
    font-size: 80%;
    color: #747474;
}
ul.newsList li{
    margin: 0 5px;
    padding: 7px 0;
    border-bottom: .5px solid #1C45B6;
}
ul.newsList li:last-child{
    border: none;
}
ul.newsList li a{
    transition: 0.5s;
}
ul.newsList li a:hover{
    color: #1C45B6;
}
ul.newsList li a div{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#topPage ul.newsList li a div.thumbnail{
    display: none;
}
a.moreBtn{
    width: 200px;
    padding: 10px;
    margin: 0 auto;
    margin-top: clamp(2rem, 5.3vw ,4rem);
    justify-content: center;
    letter-spacing: .5em;
    color: #1C45B6;
    border: 1px solid #1C45B6;
    background-color: #fff;
    border-radius: 3px;
    transition: 0.5s;
    position: relative;
}
a.moreBtn:hover{
    background-color: #1C45B6;
    color: #fff;
}
a.moreBtn p{
    transition: 0.5s;
    position: relative;
    display: inline-block;
    padding-right: 20px;
}

a.moreBtn p::after,
a.moreBtn p::before{
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity 0.5s;
}

a.moreBtn p::after{
    /* content: "";
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-left: 10px;
    transition: opacity 0.5s; */
    background: url('./img/moreBtn.svg') no-repeat center/contain;
    opacity: 1;
}
a.moreBtn p::before{
    /* content: "";
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-left: -30px;
    transition: opacity 0.5s; */
    background: url('./img/moreBtn_white.svg') no-repeat center/contain;
    opacity: 0;
}
a.moreBtn:hover p::after{
    opacity: 0;
}
a.moreBtn:hover p::before{
    opacity: 1;
}
@media screen and (max-width: 768px) {
    ul.newsList p{
        width: 70%;
    }
    ul.newsList time{
    font-size: 70%;
}
}
/* ************ ↑↑↑↑↑↑　NEWS　fin ↑↑↑↑↑↑　************ */


/* ************ ↓↓↓↓↓↓　MESSAGE　start ↓↓↓↓↓↓　************ */
#message{
    position: relative;
}
#message .msgBox{
    position: relative;
    /* padding: 5% 0 0; */
}
#message .msgBg{
    width: 90%;
    min-width: 330px;
    max-width: 1000px;
    /* margin-left: 20%;
    margin-right: 10%; */
    margin: 0 auto;
    background-color: #E1F2FF;
    padding: 10% 0;
    clip-path: polygon(0 20%,50% 0,100% 20%,100% 100%, 0 100%);
}
#message .msgDeco01{
    width: 5rem;
    margin: 0 auto;
}
#message .msgDeco02{
    width: 35%;
    margin: 0 auto;
}
#message .msgBox p{
    width: 68%;
    min-width: 330px;
    margin: 0 auto;
    line-height: 2;
    /* letter-spacing: .01em; */
    font-size: clamp(1.5rem, 4vw, 1.8rem);
    position: relative;
    z-index: 1;
    padding: 0 10px;
}
#message .msgBox p span{
    display: inline-block;
    font-size: 120%;
    padding: 3% 0 1% 0;
    color: #00428E;
}
#message .msgflower{
    position: absolute;
    opacity: .6;
}
#message .msgflower.msg01{
    width: 180px;
    right: 10%;
    top: -10%;
}
#message .msgflower.msg02{
    width: 100px;
    right: 5%;
    top: 20%;
}
#message .msgpicWrap{
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 4fr 6fr 3fr;
    grid-template-rows: 4fr 1fr 2fr;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
#message .msgPic01_sp,
#message .msgPic02_sp{
    display: none;
}
#message .msgpicWrap .msgPic01{
    grid-column: 1;
    grid-row: 1;
}
#message .msgpicWrap .msgPic02{
    grid-column: 3;
    grid-row: 3;
}
#message div.border{
    padding: 20px 0;
}
@media screen and (max-width: 768px) {
    #message .msgBg{
        width: 96%;
        padding: 16% 0 15% 0;
        clip-path: polygon(0 10%,50% 0,100% 10%,100% 100%, 0 100%);
    }
    #message .msgBox p{
        width: 90%;
    }

#message .msgDeco02{
    width: 50%;
    margin: 0 auto;
}
    #message .msgpicWrap{
        grid-template-columns: 4fr 6fr 3fr;
        grid-template-rows: 4fr 5fr 2fr;
    }

}
@media screen and (max-width: 600px){
    #message .msgDeco01{
        width: 3rem;
        margin: 0 auto;
    }
    #message .msgpicWrap{
        display: none;
    }
    #message .msgPic01_sp,
    #message .msgPic02_sp{
        display: block;
        margin-bottom: 3rem;
        margin-top: 3rem;
    }
    #message .msgflower.msg01 {
        width: 160px;
        left: 0%;
        top: -13%;
    }
    #message .msgflower.msg02 {
        width: 100px;
        right: 0%;
        top: 70%;
        bottom: 5%;
    }
}
/* ////// パララックスのため ////// */
/* #message .box {
	width: 80%;
	height: 50vw;
	margin: 100px auto 200px;
	overflow: hidden;
}

#message .thumbnail {
	width: 100%;
    transform: translate3d(0px, 80px, 0px);

} 
*/
/* 初期位置をずらす */
/* #message .thumbnail4 {
    transform: translateY(130px); 
} */

/* ************ ↑↑↑↑↑↑　MESSAGE　fin ↑↑↑↑↑↑　************ */


/* ************ ↓↓↓↓↓↓　INFORMATION　start ↓↓↓↓↓↓　************ */
#information{
    background-color: #F5F5F5;
    position: relative;
}
#information .infoflower{
    position: absolute;
    opacity: .6;
}
#information .infoflower.info01{
    top: -22%;
    left: 3%;
    z-index: 0;
    width: 20%;
    min-width: 200px;
}
#information .infoflower.info02{
    bottom: 2%;
    right: 0;
    z-index: 0;
    width: clamp(250px, 30%, 350px);
}
#information ul.infoList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}
#information ul.infoList li{
    width: 24%;
    display: block;
    background-color: #fff;
    margin: .5% 0;
    padding: 1.5rem;
    position: relative;
}
span.new_label{
    color: #ffffff; 
    font-size: 1.4rem; 
    background: #f35b69; 
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 5px 8px;
    z-index: 1;
}
#information ul.infoList li a{
    transition: 0.5s;
}
#information ul.infoList li .text{
    padding-top: 5px;
}
#information ul.infoList li .thumbnail img{
    width: 100%;
    height: 20rem;
    object-fit: cover;
}
#information ul.infoList li a .infoBox{
    padding: 15px;

}
#information ul.infoList li a:hover{
    opacity: 0.7;
}
/* #information ul.infoList a{
    transition: 0.5s;
}
#information ul.infoList a:hover{
    opacity: 0.7;
} */
#information ul.infoList li .date{
    font-size: 80%;
    color: #747474;
}
#information ul.infoList li p.title{
    font-weight: 700;
    /* font-family: "Zen Old Mincho", serif; */
    margin: 5px 0 10px;
    font-size: clamp(1.4rem, 3.7vw ,1.6rem);
}
#information ul.infoList li .infoPricebox,
#information ul.infoList li .infoPointbox{
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 5px 0;
}
#information ul.infoList li .infoPricebox p:nth-child(1),
#information ul.infoList li .infoPointbox p:nth-child(1){
    background-color: #414656;
    color: #fff;
    border-radius: 5px;
    padding: 5px 15px;
    font-size: 80%;
}
/* 
    #information ul.infoList li .infoTitle{
        font-weight: 700;
        font-family: "Zen Old Mincho", serif;
        margin: 10px 0;
        font-size: clamp(1.4rem, 3.7vw ,1.8rem);
    }
    #information ul.infoList li .infoKoumoku{
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 5px 0;
}
#information ul.infoList li .infoKoumoku div:nth-child(1){
    background-color: #414656;
    color: #fff;
    border-radius: 5px;
    padding: 5px 15px;
} */


@media screen and (max-width: 768px) {
    #information .infoflower.info01{
        top: -15%;
        left:  0%;
        z-index: 0;
    }
    #information .infoflower.info02{
        bottom: 2%;
        right: 0;
        z-index: 0;
    }
    #information ul.infoList a{
        width: 50%;
        min-width: 330px;
        margin: 0 auto;
    }
    #information ul.infoList{
        display: block;
    }
    #information ul.infoList li{
        width: 90%;
        min-width: 330px;
        margin: 0 auto;
        margin-bottom: 10px;
    }
    span.new_label{
    font-size: 1.8rem; 
}
    #information ul.infoList li:last-child{
        margin-bottom: 0;
    }
    #information .infoList .infoBox{
        display: flex;
        justify-content: space-between;
        /* border-bottom: 1px solid; */
        margin: 0 auto;
        padding: 40px;
    }
    #information ul.infoList li a .infoBox{
        padding: 10px;
    }
    /* #information .infoList li:last-child .infoBox {
        border-bottom: none;
    } */

    #information .infoList .infoBox div.infoImg{
        width: 25%;
    }
    #information .infoList .infoBox div.infoDtl{
        width: 72%;
        font-size: clamp(1.4rem, 3.7vw ,1.6rem);
    }
}

/* ************ ↑↑↑↑↑↑　INFORMATION　fin ↑↑↑↑↑↑　************ */

/* ************ ↓↓↓↓↓↓　INSTAGRAM　start ↓↓↓↓↓↓　************ */
#instagram{
    max-width: 1000px ;
    margin: 0 auto;
}
/* ************ ↑↑↑↑↑↑　INSTAGRAM　fin ↑↑↑↑↑↑　************ */


/* ************ ↓↓↓↓↓↓　VOICE　start ↓↓↓↓↓↓　************ */
#voice{
    position: relative;
}
#voice ul.voiceWrap{
    display: flex;
    width: 90%;
    margin: 0 auto;
    max-width: 1000px;
    justify-content: space-between;
}
#voice ul.voiceWrap li{
    width: 32%;
    border: 3px solid #00428E ;
    text-align: center;
    padding: 2%;
}
#voice ul li div.faceImg{
    width: 35%;
    margin:  0 auto;
}
#voice ul li div.voiceTitle{
    font-size: clamp(2rem, 5.3vw ,2.2rem);
    font-weight: 600;
}
#voice ul li div.voicePersonal{
    font-size: 80%;
    padding: 2% 0;
}
#voice ul li div.voiceMain{
    padding: 0 0 5% 0;
    line-height: 1.5;
}
/* #voice li.voiceBox{
    width: 80%;
    max-width: 750px;
    border: 3px solid #00428E;
    padding: 30px;
    background-color: #fff;
}
#voice .voicetitleWrap{
    display: flex;
    align-items: center;
}
#voice .voicetitleWrap h4{
    font-family: "Zen Old Mincho", serif;
    font-size: clamp(2.1rem, 5.6vw ,2.6rem);
    letter-spacing: 0.1em;
    line-height: 1.5;
    width: 72%; 
}
#voice .voiceBox span{
    font-size: 1.3rem;
    display: flex;
    justify-content: end;
}
#voice .voicetitleWrap div{
    width: 25%; 
    margin-top: -10px;
}
#voice .voicetitleWrap div img{
    width: 10rem;
    margin: 0 auto;
}
#voice .voicetxtWrap{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
#voice .voicetxtWrap div{
    width: 25%;
    height: auto;
}
#voice .voicetxtWrap p{
    width: 72%;
    line-height: 1.5;
    font-size: clamp(1.5rem, 4vw, 1.8rem);
} */

@media screen and (max-width: 768px) {
    #voice ul.voiceWrap{
    display: flex;
    flex-wrap: wrap;
}
#voice ul.voiceWrap li{
    width: 90%;
    max-width: 400px;
    margin: 1% auto;
}
#voice ul li div.faceImg{
    width: 35%;
    margin:  0 auto;
}

    #voice li.voiceBox{
        /* padding: 7% 4%; */
        max-width: 550px;
        padding: 10px;
    }
    #voice .voicetitleWrap{
        display: block;
        margin: 0 auto;
    }
    #voice .voicetitleWrap div img{
        width: 7rem;
    }
    #voice .voicetitleWrap h4{
        text-align: center;
        line-height: 1.4;
        margin: 0 auto;
        width: 100%;
    }
    #voice .voiceBox span{
        display: block;
        margin-top:  -30px;
    }
    #voice .voicetitleWrap div{
        margin: 0 auto;
    }
    #voice .voicetxtWrap{
        display: block;
        margin: 0 auto;
    }
    #voice .voicetxtWrap div{
        width: 50%;
        max-width: 600px;
        margin: 20px auto;
    }
    #voice .voicetxtWrap p{
        width: 100%;
        margin: 0 auto;
    }
    #voice .voiceflower.voice01{
        bottom: 0%;
        right: 11%;
        z-index: 0;
        width: 10%;
        min-width: 100px;
    }
    #voice .voiceflower.voice02{
        bottom: 0%;
        right: 0%;
        z-index: 0;
        width: 10%;
        min-width: 120px;
    }
}
@media screen and (max-width: 600px){
    #voice .voicetxtWrap div{
        width: 100%;
        max-width: 600px;
    }
}

/*==================================================
スライダーのためのcss
===================================*/
.voiceSlider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:750px;
    margin:0 auto;
    padding: 5px;
}

.voiceSlider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.voiceSlider .slick-slide {
    margin:0 30px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
    z-index: 5;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: 2%;
    transform: rotate(-135deg);
    color: transparent;
}

.slick-next {/*次へ矢印の位置と形状*/
    right: 2%;
    transform: rotate(45deg);
    color: transparent;
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
    margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
    margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}
@media screen and (max-width: 768px) {
.voiceSlider{
    max-width: 550px;
}
.voiceSlider .slick-slide {
    margin:0 15px;
}   
}
@media screen and (max-width: 600px) {
.voiceSlider{
    width: 95%;
}
}
/* ************ ↑↑↑↑↑↑　VOICE　fin ↑↑↑↑↑↑　************ */


/* ************ ↓↓↓↓↓↓　footer　start ↓↓↓↓↓↓　************ */
footer{
    background-color: #00428B;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.5;
    padding:  80px 0;
}
footer .footerWrap{
    max-width: 900px;
}
footer .footerInfo a{
    transition: 0.5s;
}
footer .footerInfo a:hover{
    opacity: 0.6;
}
footer .footerInfo a div{
    width: 260px;
    padding: 10px;
    background-color: #fff;
}
footer .footerAddress{
    margin: 20px 0;
}
footer .footerWrap ul li{
    margin: 15px 0;
}
footer .footerWrap ul a{
    transition: 0.5s;
}
footer .footerWrap ul a:hover{
    color: #414656;
}
@media screen and (max-width: 768px) {
    footer .footerWrap{
        display: block;
        max-width: 700px;
        width: 85%;
    }
    footer .footerInfo{
        margin-bottom: 30px;
    }
    footer .footerAddress{
        margin: 15px 0;
    }
}

/* ************ ↑↑↑↑↑↑　footer　fin ↑↑↑↑↑↑　************ */


/* ////////////////////////////////////////////////////////// */
/* /////////////////////// 下層ページ ///////////////////// */
/* ////////////////////////////////////////////////////////// */
/* ************ ↓↓↓↓↓↓　下層COMMON　start ↓↓↓↓↓↓　************ */
#subtopView div{
    height: 40vh;
    overflow: hidden;
    padding-top: 50px;
}
#subtopView div img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* 縦横比を保ちつつ埋める */
    object-position: center top; 
    /* 中心〜下側を優先的に表示 */
    display: block;
}
.subpageTitle {
    padding-top: 10rem;
}
.subpageTitle h2{
    font-size: clamp(4rem, 10.6vw ,4.8rem);
    /* font-family: "Zen Old Mincho", serif; */
    text-align: center;
    letter-spacing: 0.2em;
    line-height: 1.3;
    position: relative;
    z-index: 5;
    font-weight: 500;
    /* padding-bottom: clamp(1.5rem, 4vw ,4rem); */
    color: #1C45B6;
}
.subpageTitle h3{
    font-size: clamp(2rem, 5.3vw ,2.4rem);
    /* font-family: "Zen Old Mincho", serif; */
    text-align: center;
    letter-spacing: 0.2em;
    line-height: 1.3;
    position: relative;
    z-index: 5;
    padding-bottom: clamp(1.5rem, 4vw ,4rem);
}
.subpageWrap{
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
    font-size: clamp(1.4rem, 3.7vw ,1.6rem);
}
/* ****** パンクズリスト ****** */
.c-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: #6C6C6C;
    line-height: 3.2;
}
@media screen and (max-width: 768px) {
.c-breadcrumbs {
    font-size: 0.8125rem;
}
.subpageTitle {
    padding-top: 5rem;
}
}
/* ************ ↑↑↑↑↑↑　下層COMMON　fin ↑↑↑↑↑↑　************ */

/* ************ ↓↓↓↓↓↓　CONTACT　start ↓↓↓↓↓↓　************ */
.formWrapper{
    font-size: clamp(1.4rem, 3.7vw ,1.6rem);
    line-height: 1.5;
    letter-spacing: 0.2rem;
    max-width: 1000px;
}
.formWrapper .aboutTxt{
    padding: 1em 0;
}
.formBox dl{
    padding: 0.5em 0;
}
.formBox dt{
    padding: 0.5em;
    width: 100%;
    display: flex;
    align-items: center;
    font-weight: 400;
}
.formBox dt::before{
    content: "必須";
    color: #fff;
    background-color: #EE4C4C;
    padding: .2em .5em;
    margin-right: .5em;
    border-radius: 3px;
    font-weight: 300;
    font-size: 80%;
}
input[type=text], 
input[type=email], 
input[type=tel], textarea{
    width: 100%;
    border: 1px solid #414656;
    border-radius: 3px;
    padding: .5em;
}

.formbtnWrap{
    width: 200px;
    margin: 0 auto;
    background-color: #414656;
    border: 2px solid #414656;
    text-align: center;
    border-radius: .3em;
    transition: .5s;
    color: #fff;
    margin-top: clamp(1em, 2.6vw ,3em);
}
.formbtnWrap:hover{
    background-color: #fff;
    color: #414656;
}
.formbtnWrap .btnSubmit{
    /* color: #fff; */
    letter-spacing: 0.2em;
    padding: .5em;
}
@media screen and (max-width: 768px){}
/* ************ ↑↑↑↑↑↑　CONTACT　fin ↑↑↑↑↑↑　************ */


/* ************ ↓↓↓↓↓↓　THANKS　start ↓↓↓↓↓↓　************ */
@media screen and (max-width: 768px){}
/* ************ ↑↑↑↑↑↑　THANKS　fin ↑↑↑↑↑↑　************ */


/* ************ ↓↓↓↓↓↓　LINK　start ↓↓↓↓↓↓　************ */
#link .linkTxt{
    font-size: clamp(1.4rem, 3.7vw ,1.6rem);
    padding-bottom: 3em;
}
#link .linkInfo, #link .linkTxt{
    max-width: 1000px;
    margin: 0 auto;
}
#link .linkWrap{
    padding: 1em 0;
}
#link .linkInfo .linkWrap table{
    border-top: 1px solid #1C45B6;
}

#link .linkInfo .linkWrap p{
    font-size: clamp(1.6rem, 4.2vw ,1.8rem);
    font-weight: 600;
    padding: 0.5em;
    color: #1C45B6;
}
#link th, #link td{
    padding: 1em;
}
#link table{
    width: 100%;
    font-size: clamp(1.4rem, 3.7vw ,1.6rem);
    line-height: 1.5;
    letter-spacing: 0.2rem;
}
#link table tr{
    border-bottom: 0.5px solid #1C45B6;
}
#link table tr:last-child{
    border-bottom: none;
}
#link table tr th{
    width: 25rem;
}
#link table tr td a{
    transition: 0.5s;
}
#link table tr td a:hover{
    color: #1C45B6;
}
#link table tr td span{
    font-size: 80%;
}
@media screen and (max-width: 768px){
    #link th, #link td{
        display: block;
        letter-spacing: normal;
        padding: 0.5em;
    }
    #link table tr th{
        width: 100%;
        padding-bottom: 0;
    }
    #link table tr td{
        width: 100%;
        padding-top: 0;
        word-break: break-all; 
        /* 単語の途中でも強制的に折り返す */
    }

}
@media screen and (max-width: 768px){}
/* ************ ↑↑↑↑↑↑　LINK　fin ↑↑↑↑↑↑　************ */


/* ************ ↓↓↓↓↓↓　COMPANY　start ↓↓↓↓↓↓　************ */
#company .companyInfo{
    max-width: 1000px;
}
#company table{
    width: 100%;
    font-size: clamp(1.4rem, 3.7vw ,1.6rem);
    line-height: 1.5;
    letter-spacing: 0.2rem;
}
#company th, #company td{
    padding: 1em 0.5em;
}
#company table tr{
    border-bottom: 0.5px solid #1C45B6;
}
#company table tr:last-child{
    border-bottom: none;
}
#company table tr th{
    width: 18em;
    color: #1C45B6;
}
#company table tr td a{
    transition: 0.5s;
}
#company table tr td a:hover{
    color: #1C45B6;
}
@media screen and (max-width: 768px){
    #company table tr th{
        width: 30%;
    }
}
/* ************ ↑↑↑↑↑↑　COMPANY　fin ↑↑↑↑↑↑　************ */


/* ************ ↓↓↓↓↓↓　NEWS一覧　start ↓↓↓↓↓↓　************ */
/* /////////////////////////////////////////////////////////////////////////// */
/* ************ ////// Archiveページ ////// ************ */
/* /////////////////////////////////////////////////////////////////////////// */
h1.post-title{
    position: relative;
}
.news-list > li {
    padding-bottom: 5px;
    border-bottom: 1px solid #414656;
}
.news-list > li:not(:last-of-type) {
margin-bottom: 5px;
}
.news-list a {
display: flex;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
padding-left: 3.193%;
position: relative;
}
.news-list a::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 14px 14px;
border-color: transparent transparent #E5E5E5 transparent;
position: absolute;
bottom: 0;
right: 0;
}
.news-list .thumbnail {
width: 22%;
margin-right: 3%;
line-height: 1;
}
.news-list .thumbnail img{
    height: 10rem;
    object-fit: cover;
}
.news-list .text {
flex: 1 1 0;
line-height: 1.4;
}
.news-list .date {
/* font-size: 0.8125rem; */
font-size: 80%;
color: #808080;
}
@media screen and (max-width:768px){
    .news-list .date {
        font-size: 0.6rem;
        }
    .news-list > li {
        padding-bottom: 8px;
    }
    .news-list > li:not(:last-of-type) {
    margin-bottom: 10px;
    }
}

/* LINE UP用 */
.lineup-list > li {
    padding-bottom: 18px;
    border-bottom: 1px solid #BABABA;
}
.lineup-list > li:not(:last-of-type) {
margin-bottom: 16px;
}
.lineup-list a {
display: flex;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
padding-left: 3.193%;
position: relative;
}
.lineup-list a::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 14px 14px;
border-color: transparent transparent #E5E5E5 transparent;
position: absolute;
bottom: 0;
right: 0;
}
.lineup-list .thumbnail {
width: 17.288%;
margin-right: 6.101%;
line-height: 1;
}
.lineup-list .text {
flex: 1 1 0;
line-height: 1.687;
}
.lineup-list .date {
font-size: 0.8125rem;
color: #808080;
}


.wp-pagenavi {
    display: flex;
    justify-content: flex-end;
    margin-top: 42px;
}
.wp-pagenavi span, .wp-pagenavi a {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border: 1px solid #1C45B6;
font-size: 0.9375rem;
font-weight: 500;
transition: 0.3s ease-in;
}
.wp-pagenavi span:not(:last-child), .wp-pagenavi a:not(:last-child) {
margin-right: 2.622%;
}
@media screen and (max-width: 768px) {
.wp-pagenavi span, .wp-pagenavi a {
    font-size: 0.875rem;
}
}
.wp-pagenavi span:hover, .wp-pagenavi a:hover {
background-color: #1C45B6;
color: #FFFFFF;
}
.wp-pagenavi span.current {
background-color: #1C45B6;
color: #FFFFFF;
}
.wp-pagenavi a {
color: #666666;
}
.wp-pagenavi a.nextpostslink, .wp-pagenavi a.previouspostslink {
width: auto;
padding: 5px 1.2em;
}

/* /////////////////////////////////////////////////////////////////////////// */
/* ************ ////// Singleページ ////// ************ */
/* /////////////////////////////////////////////////////////////////////////// */

.category-tag {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.8125rem;
    color: #555555;
}
.category-tag > li {
    min-width: 40px;
    padding: 5px;
    margin-bottom: 0.5em;
    background-color: #F3F3F3;
    border-radius: 5px;
    text-align: center;
    line-height: 1;
}
.category-tag > li:not(:last-of-type) {
    margin-right: 0.923em;
}

/* .buy_info a{
    background-color: #6C6C6C;
    color: #fff;
    border-radius: 3px;
    padding: 2px 5px;
} */


.cat-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.8125rem;
    color: #555555;
}
.cat-list > li {
    min-width: 40px;
    padding: 5px;
    /* margin-bottom: 0.5em; */
    background-color: #F3F3F3;
    border-radius: 5px;
    text-align: center;
    line-height: 1;
}
.cat-list > li:not(:last-of-type) {
    margin-right: 0.923em;
}
.post .box-white {
    padding-right: 5.882%;
    padding-left: 5.882%;
    border: #414656 solid 1px;

}
.post-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 2px;
font-size: 1rem;
color: #555555;
}
.post-header time {
margin-bottom: 0.5em;
}
.post-header .cat-list {
font-size: 0.875rem;
}
@media screen and (max-width: 768px) {
.post-header .cat-list {
    font-size: 0.8125rem;
}
}
.post-header .cat-list > li {
padding-right: 18px;
padding-left: 18px;
}
.post-title {
margin-bottom: 0.718em;
font-size: 2rem;
font-weight: bold;
line-height: 1.468;
}
@media screen and (max-width: 768px) {
.post-title {
    font-size: 1.375rem;
}
}
.post-wrapper {
line-height: 1.75;
letter-spacing: 0.11em;
}
.post-wrapper > * {
margin-bottom: 16px;
}
.post-wrapper h2 {
padding-left: 1.166em;
margin-bottom: 1.5em;
border-left: 3px solid #333;
font-size: 1.5rem;
font-weight: bold;
line-height: 1.5;
}
.post-wrapper .infoPricebox,
.post-wrapper .infoPointbox{
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 5px 0;
}
.post-wrapper .infoPricebox p:nth-child(1), 
.post-wrapper .infoPointbox p:nth-child(1){
    background-color: #414656;
    color: #fff;
    border-radius: 5px;
    padding: 2px 10px;
    font-size: 90%;
}


@media screen and (max-width: 768px) {
.post-wrapper h2 {
    font-size: 1.125rem;
}
}
.post-wrapper h3 {
padding: 10px 4.444%;
margin-bottom: 1.318em;
background-color: #E2EBEF;
border-radius: 10px;
font-size: 1.375rem;
font-weight: bold;
color: #333;
line-height: 1.5;
}
@media screen and (max-width: 768px) {
.post-wrapper h3 {
    font-size: 1rem;
}
}
.post-wrapper .images-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.post-wrapper .images-wrapper.col2 {
margin-bottom: 0;
}
.post-wrapper .images-wrapper.col2 > a {
width: 47.46%;
margin-bottom: 36px;
}
.post .eyecatch {
height: 0;
padding-top: 59.841%;
position: relative;
overflow: hidden;
}
.post .eyecatch img {
width: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}

.news-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.news-wrapper .box-white {
    padding: 26px 7.282% 50px;
}
.news-wrapper .main-content {
    width: 61.551%;
}
.news-wrapper .sidebar {
    width: 32.931%;
}
@media screen and (max-width: 768px) {
    .news-wrapper .box-white {
        margin-bottom: 40px;
    }
    .news-wrapper .main-content, .news-wrapper .sidebar {
        width: 100%;
    }
    .news-wrapper .box-white {
    padding: 26px 3% 50px;
}
}
.news-title {
    margin-bottom: 1em;
    /* font-family: "Marcellus", serif; */
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 2.25;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
@media screen and (max-width: 768px) {
.news-title {
    font-size: 1.125rem;
}
}
.sidebar .box-white {
padding-right: 8.376%;
padding-left: 8.376%;
border: #414656 solid 1px;
}
.sidebar .item {
padding: 0 3.773%;
padding-bottom: 36px;
}
.sidebar .item:not(:last-of-type) {
border-bottom: 1px solid #BABABA;
margin-bottom: 42px;
}
.sidebar-list {
padding: 0 7.718%;
font-weight: 500;
color: #555555;
}
.sidebar-list a {
display: inline-block;
padding-right: 1em;
line-height: 2.562;
}
.sidebar-list a::before {
content: "-";
display: inline-block;
margin-right: 0.5em;
}
.page-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    margin-top: 28px;
    border-top: 1px dashed #666666;
    border-bottom: 1px dashed #666666;
    font-size: 0.875rem;
    font-weight: 500;
    color: #666666;
}
@media screen and (max-width: 768px) {
.page-nav {
    font-size: 0.8125rem;
}
}
.page-nav > li {
min-width: 5em;
}
.page-nav > li:first-of-type a::after {
right: auto;
left: 0;
transform: translateY(-50%) rotate(-135deg);
}
.page-nav a {
display: inline-block;
min-width: 5em;
padding: 5px 14px;
position: relative;
}
.page-nav a.to-archive {
font-weight: bold;
color: #333;
}
.page-nav a.to-archive::after {
content: none;
}
.page-nav a::after {
content: "";
width: 6px;
height: 6px;
border-top: 1px solid #666666;
border-right: 1px solid #666666;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%) rotate(45deg);
}


@media screen and (max-width: 768px){}
/* ************ ↑↑↑↑↑↑　NEWS一覧　fin ↑↑↑↑↑↑　************ */


/* ************ ↓↓↓↓↓↓　NEWS詳細　start ↓↓↓↓↓↓　************ */
@media screen and (max-width: 768px){}
/* ************ ↑↑↑↑↑↑　NEWS詳細　fin ↑↑↑↑↑↑　************ */


/* ************ ↓↓↓↓↓↓　INFO一覧　start ↓↓↓↓↓↓　************ */

#newsCategory ul.news-list li .date{
    font-size: 80%;
    color: #747474;
}

#newsCategory ul.news-list li p.title{
    font-weight: 700;
    /* font-family: "Zen Old Mincho", serif; */
    /* margin: 5px 0 10px; */
    font-size: clamp(1.4rem, 3.2vw ,1.6rem);
}
#newsCategory ul.news-list li .infoPricebox,
#newsCategory ul.news-list li .infoPointbox{
    display: flex;
    align-items: center;
    gap: 15px;
    /* margin: 5px 0; */
}
#newsCategory ul.news-list li .infoPricebox p:nth-child(1),
#newsCategory ul.news-list li .infoPointbox p:nth-child(1){
    background-color: #414656;
    color: #fff;
    border-radius: 3px;
    padding: 0px 10px;
    font-size: 80%;
}
@media screen and (max-width: 768px){}
/* ************ ↑↑↑↑↑↑　INFO一覧　fin ↑↑↑↑↑↑　************ */


/* ************ ↓↓↓↓↓↓　INFO詳細　start ↓↓↓↓↓↓　************ */
@media screen and (max-width: 768px){}
/* ************ ↑↑↑↑↑↑　INFO詳細　fin ↑↑↑↑↑↑　************ */

/* ************ ↓↓↓↓↓↓　404詳細　start ↓↓↓↓↓↓　************ */
#notfound .msg404 p{
    line-height: 1.5;
}
#notfound .msg404 a{
    color: #8BAAFF;
    transition: 0.5s;
}
#notfound .msg404 a:hover{
    color: #1C45B6;
}
@media screen and (max-width: 768px){}
/* ************ ↑↑↑↑↑↑　404詳細　fin ↑↑↑↑↑↑　************ */

/* ************ ↓↓↓↓↓↓　PRIVACY　start ↓↓↓↓↓↓　************ */
#privacy .privacyInfo{
    max-width: 1000px;
}

#privacy ol.individualList01 {
    list-style-type: decimal;/* リストの左側に黒丸 */
	margin-left: 24px;/* リストの左側に余白 */
	text-align: left;
    margin: 50px 0;
}
#privacy ol.individualList02 {
    list-style-type: lower-alpha;
	margin-left: 24px;
	text-align: left;
}
#privacy ol.individualList01 li p:first-child{
    font-weight: 800;
}
#privacy ol.individualList01 li{
    margin-top: 20px;
}
#privacy ol.individualList02 li{
    margin-top: 0px;
}
.individualContact{
    display: flex;
    justify-content: space-between;
    padding-top: 50px;
}

@media screen and (max-width: 768px){}
/* ************ ↑↑↑↑↑↑　PRIVACY　fin ↑↑↑↑↑↑　************ */

/* ************ ↓↓↓↓↓↓　CONTACT　start ↓↓↓↓↓↓　************ */
/* デフォルトは非表示 */
.wpcf7-response-output {
  display: none;
}

/* 送信後のみ表示 */
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  display: block;
}

.wpcf7-not-valid-tip {
  display: none !important;
}

.wpcf7 form.invalid .wpcf7-not-valid-tip {
  display: block !important;
}

.wpcf7cf-hidden .wpcf7-not-valid-tip {
  display: none !important;
}

.formAllWrapper{
    padding: 60px 6% 90px;
    margin-bottom: 74px;
    background-color: #FFF9F4;
    border-radius: 10px;
}
.formWrapper{
    max-width: 586px;
    margin: 0 auto;
}
.formText{
    margin-bottom: 50px;
    line-height: 2;
}

.formBox{
    width: 100%;
}
.formBox tr{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.formBox td{
    padding-bottom: 30px;
    text-align: left;
    line-height: 2;
}
.formBox.groupSelectedBox td{
    width: 100%;
    padding-bottom: 10px;
}
.formBox td:nth-of-type(2){
    width: 65%;
}
.formBox.groupSelectedBox td:nth-of-type(2){
    width: 100%;
    padding-bottom: 30px;
}
@media screen and (max-width: 768px) {
    .formAllWrapper{
        margin-bottom: 0px;
    }
    .formBox {
    display: block;
    }
    .formBox tr {
    /* display: block; */
    width: 100%;
    padding-bottom: 15px;
    }
    .formBox td{
        padding-bottom: 5px;
        text-align: left;
    }
    .formBox td:nth-of-type(2){
    width: 100%;
    }
}

.required {
    display: inline-block;
}
.required::after {
content: "※";
display: inline-block;
padding-left: 1em;
color: #DA1725;
}
.requiredText{
    color: #DA1725;
}
input[type=text], input[type=email], input[type=tel], textarea{
    width: 100%;
    padding: 6px 10px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(196, 196, 196);
    border-image: initial;
    border-radius: 5px;
    outline: none;
}
.contact_border p{
    width: 100%;
    padding: 6px 10px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(196, 196, 196);
    border-image: initial;
    border-radius: 5px;
    outline: none;
    text-align: center;
}
.formBtn{
    margin-top: 30px;
    text-align: center;
}
.selectDateBox{
    width: 100%;
    padding: 6px 10px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(196, 196, 196);
    border-image: initial;
    border-radius: 5px;
    outline: none;
    text-align: center;
}

.btnSubmit{
    min-width: 200px;
    padding: 10px;
    /* border: #333 solid 1px; */
    background-color: #333;
    border-radius: 5px;
    color: #fff;
}
.btnSubmit:hover{
    background-color: #555555;
    /* color: red; */
    transition: .3s;
}

.contactCaption{
    font-size: 12px;
}
@media screen and (max-width: 768px){}
/* ************ ↑↑↑↑↑↑　CONTACT　fin ↑↑↑↑↑↑　************ */