@charset "UTF-8";
/* 
エコ建築 キャンペーンLP
川柳 2026
style.css
*/

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
html, body{
	font-family: "Arial", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-feature-settings : "palt" 1;
	letter-spacing: 0;
	line-break:strict;/* normalは句読点のみ*/
  
}
div{
  padding: 0;
  margin: 0;
}
body {
	color: #000;
	line-height: 1;
	margin: 0;
	padding: 0;
	font-size: 15px;
	background: #f9edc5;
	overflow-x: hidden;
}
body.theme2025{
	background: url(../images/bg.jpg) center top repeat #fff;
	background-size: 100px 25px;
}
a{
	color: #1b284f;
	text-decoration: none;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	cursor: pointer;
}
a:not(.btn, .bnr){
	text-decoration: underline;
}
a{
	text-decoration:none;
}
a:hover img{
    filter:brightness(1.2);
}
*[onClick]{
	cursor: pointer;
}
h1, h2, h3, h4, h5, h6, p, ul, li, table{
	margin: 0;
	padding: 0;
	font-size: inherit;
}
h1, h2, h3, h4, h5, h6{
	line-height: 1.6;
	font-weight: 900;
}
h2{
}
h3{
}
h4{
}
p {
	line-height: 1.8;
}
ul{
	text-align: left;
	font-size:16px;
	display:flex;
	flex-direction:column;
	gap: 12px;
	margin: 15px 0 0;
}
li{
	list-style: none;
	display:block;
	text-indent:-1em;
	padding-left:1em;
	line-height: 1.3;
}
li:before{
	content:"";
	display:inline-block;
	background:#555;
	border-radius:20px;
	padding:0.4em;
	margin-right:0.2em;
}

.forPC{
	display: block;
}
.forSP{
	display: none;
}

@media screen and (max-width:767px) {

	body{
		font-size: 14px;
	}
	p{
		line-height: 2;
	}

	.forPC{
		display: none;
	}
	.forSP{
		display: block;
	}

}

img{
  display: block;
  border: none;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.container{
	position: relative;
	margin: 0 auto;
	overflow-x:hidden;
	/* background: #fff; */
}
.main{
	position: relative;
}
body.pc .main{
}
@media screen and (min-width:768px) {
	.main{
	}
}

.w1920content{
  margin: 0 auto;
}
/*
.w1920content > img{
  width:160%;
  max-width: none;
  margin:0 -30%;
}
*/
.header_space{
	opacity:0;
}
.header{
	position: fixed;
	top:0;bottom:0;
	transition:0.3s ease-out;
}
/*
body.top_pc .header_space{
	display: none;
}
body.top_pc .header{
	transform:translateY(-100%);
	transition:0.3s ease-out;
}
body.top_pc.in_header .header{
	transform:translateY(0%);
}
*/

.floating{
	position: fixed;
	bottom:0;
	right:0;
	width: 74px;

}
body.pc .floating{
	right:0;	
} 
@media screen and (max-width:767px) {
	.floating{
		width:50px;
	}
}

.floating_header{
	position: fixed;
	top:5px;
	right:0;
	display:flex;
	flex-direction:column;
	gap:5px;
}
.floating_header_btn{
	text-align:center;
	display: flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	gap:0.4em;
	text-align: center;
	font-weight: bold;
	padding:0;
	width:45px;
	height:80px;
	box-sizing:border-box;
	background:#fff;
	padding: 5px 0 0;
	margin: 0 0 0;
	border-radius: 6px 0 0 6px;
	box-shadow: 0 10px 17px #340a0a26;
	font-size:14px;
	line-height:1.1;
}
.floating_header_btn:before{
	content: "";
	display:block;
	background: url(/images/icon_store.png) center bottom no-repeat;
	width: 100%;
	height: 24px;
	background-size: auto 100%;
	margin: 0;
}
.floating_header_btn-app{
	color:#005e3c;
}
.floating_header_btn-app:before{
	background-image: url(../images/icon_app.png);
}
@media screen and (min-width:768px) {
	.floating_header_btn br{
		display:none;
	}
	.floating_header_btn{
		width: 100px;
		height: 100px;
		font-size:18px;
	} 
	.floating_header_btn:before{
		height: 27px;
	}
}


#footer{
	background: #fff;
	padding:70px 20px 50px;
	
}
.footer_h{
	text-align:center;
	font-size:17px;
	width:86%;
	margin: 0 auto 0;
}
.footer_h:not(:first-child){
	margin-top:13px;
}
.footer_text{
	text-align:center;
	font-size:15px;
	width: 88%;
	margin:5px auto 0;
	max-width: 800px;
	line-height:1.4;
}
.footer_text span{
	text-align:center;
	margin:0 0.3em;
	display:inline-block;
}

.footer_link{
	text-align: center;
	font-size: 15px;
	color:#333;
	text-decoration: none;
}
#copyright{
	text-align: center;font-size: 11px;
	margin: 50px 0 0;
	opacity:0.7;
}


/*----------------------------------------● コンテンツ*/
.container{
}

.container.phase2{
}

.content{
	position: relative;
	margin:0 auto;
	min-height: 100vh;
}
.container.phase2 .content{

}

.container,.content{
		background-size:138px auto, 100% 100%;
}
@media screen and (max-width:818px) {
	.container,.content{
		background-size:calc(100vw * 138/818) auto, 100% 100%;
	}

}


.sec{
		padding:50px 0;
}
.sec_inner{
	margin:0 auto;
	max-width:1000px;
}
.sec_header{
	text-align:center;
	font-size:28px;
}
.sec_shoulder{
	font-size:70%;
	color: #1b284f;
}
.sec_title{
	color: #1b284f;
}
.sec_lead{
	font-size:65%;
}
.sec_body{
}
.oubo_content{
	background: #fff;
	width: 90%;
	margin: 30px auto;
	box-sizing: border-box;
	border-radius: 12px;
	overflow: hidden;
}
.oubo_content > h4{
	margin:20px 0 0;
	line-height:1.2;
	color: #1b284f;
	font-size: 18px;
}
.oubo_content > h4:first-child{
	margin-top:0;
}
.sec_img{
}

#oubo{
	background:#ebc33c;
}
.theme2025 #oubo{
	background:#80d6e0;
}
#oubo_kiyaku{
	padding: 30px 5%;
}
#oubo_yuso{
}
#oubo_form{
}
@media screen and (max-width:768px) {
	.sec{
	}
	.sec_inner{
	}
	.sec_header{
		font-size:22px;
	}
	.sec_shoulder{
	}
	.sec_title{
	}
	.sec_lead{
	}
	.sec_body{
	}
	.oubo_content{
	}
	.sec_img{
	}
	
	#oubo{
	}
	#oubo_kiyaku{
	}
	#oubo_yuso{
	}
	#oubo_form{
	}
}

.content .btns_nav{
	padding: 7% 0;
	margin: 0 auto;
}
.content .btns_nav .btn{
	font-weight:normal;
	background: #1b294f;
}


#oubo .form_wrapper{
	background:none;
}
#oubo .form_content_title{
	display:none;
}

.content_inner{
	max-width: 1000px;
	margin:0 auto;
	position: relative;
}
#drink{
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin: 756% 0 0;
	/* border:#000 10px solid; */
}
.container.phase2 #drink{
	margin: 1045% 0 0;
}
@media screen and (max-width:767px) {
	.content{
	}
}
.content_texts{
}
.btns, .btns.btns-senryu{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 40px auto;
	max-width: 86%;
}

.btn{
	cursor:pointer;
}
.content_btns{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 0 10%;

	display: flex;
	align-items: center;
	justify-content: center;	
}
.content_btn{
}
.content_btn_img{
}

.bottom_btns{
	position: static;
	display: flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:20px;
	padding: 1px 0 50px;
	margin: 40px;
}

.bottom_notes{
	color:#fff;
	margin: 0 0 30px;
	width:95%;
	max-width: 800px;
}
.content_btn{
	margin: auto;
}
.content_btn_img{
}

.btn_coupon{
	width:460px;
}


.btn, .btns-senryu .btn{
	background: #1b284f;
	width:88%;
	max-width:480px;
	color: #fff;
	text-align:center;
	padding: 15px 20px 13px;
	font-weight:bold;
	letter-spacing:2px;
	border-radius:10px;
	min-height: 80px;
	font-size:20px;
	display:flex;
	align-items:center;
	justify-content:center;
	box-sizing: border-box;
	line-height: 1.2;
	transition:0.3s ease-out;
}
.btn:hover, .btns-senryu .btn:hover{
	filter:brightness(1.4);
}
@media screen and (min-width:768px) {
	.btn, .btns-senryu .btn{
		font-size:24px;
		min-height:100px;
	}
}
.btn_1{
}

.btn_2{
	color:#ffe70c;
	background: #1b284f;
}
.btn_coupon{
	width:460px;
}

@media screen and (max-width:767px) {
	.btn_1{
	}
	.btn_2{
	}

}

div.gaper:empty{
 	height: 30px;
}

/*----------------------------------------● ヘッダー*/

.header_content{
}
.header_content_img{
}
.heacer_nav{
	display: flex;
	align-items: stretch;
	justify-content: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.header_nav_item{
	width: 230px;
	background: #fff;
}
.header_nav_item,.heacer_nav .separator{
     padding:19px 0;
}
.heacer_nav .separator{
    width: 0.6px;
    background: #fff;
    display: flex;
    align-items: stretch;
   
}
.heacer_nav .separator:before{
    content:"";
    display: block ;
    width: 0.6px;
    background: #513e32;
}
.header_nav_item:not(:first-child) .header_nav_item_img{
    /* border-left:#222 0.6px solid; */

}

@media screen and (max-width:767px) {
	.heacer_nav{
		display: flex;
	}
	.header_nav_item{
	width: 110px;
	max-width: 30vw;
	}
    .header_nav_item,.heacer_nav .separator{
         padding: 16px 0;
    }
}

/*----------------------------------------● コンテント詳細*/
#recommend{
	min-height:100vh;
}
#recommend .content_btns{
	
}

#couponinfo{
	padding-bottom: 100px;
}

#kodawari{
}
#kodawari .content_btns{
	margin-bottom: 7.5%;
}

@media screen and (max-width:767px) {
	#recommend .content_btns{
	margin-bottom: 20%;
	}
	#kodawari .content_btns{
	margin-bottom: 15%;
	}
}

/*----------------------------------------● クーポン*/
.coupon{
	display: flex;
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	align-items: flex-start;
	justify-content:center;
	background:#6e616185;
	backdrop-filter: blur(10px);
	z-index:1000;
	max-height: 100vh;
	pointer-events: none;
	opacity: 0;
	transform: scale(1.03);
	transition: 0.3s ease-out;
	}
body.open_coupon .coupon{
	display:flex;
	pointer-events: auto;
	opacity: 1;
	transform: scale(1);
}
.coupon_inner{
	background:#fff;
	margin: 5% 2% 0;
	border-radius:20px;
	position:relative;
	max-height:calc(100% - 10vw);
	display:flex;
	flex-direction:column;
}
.coupon_content{
	margin: 0 auto;
	overflow-y: auto;
	max-height:100%;
	overflow-y: auto;
	background: #fff;
	border-radius: 20px;
}

.btn_close{
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left:auto;
  margin: -10px -10px 0 0;
  /*  top: 3px;

  right: 3px;*/
  background: #73625d;
  width: 70px;
  height: 70px;
  border-radius: 100px;
  box-shadow: 0 3px 7px rgb(76 50 44 / 30%);
  z-index: 1;
  cursor:pointer;
  z-index: 10000;
}
.btn_close:hover{
	filter:brightness(1.2);
}
@media screen and (min-width:415px) {
	.btn_close{
	width: 60px;
	height: 60px;
	}
	body.sp .menu_info{
	}
}

.btn_close:before, .btn_close:after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 12px;
  right: 12px;
  height: 1px;
  background: #ffffff6e;
}
.btn_close:before{
  transform: rotate(135deg);
}
.btn_close:after{
  transform: rotate(45deg);
}
.coupon_img{flex-shrink: 0;object-fit: contain;}

.coupon_texts{
	margin: 20px auto 0;
	max-width: 820px;
	font-size:16px;
	width: 86%;
}
@media screen and (min-width:768px) {
	.coupon_texts{
		width:60%;
	}
}
.coupon .coupon_texts{
	width:86%;
	padding-bottom: 40px;
}
.coupon_texts h3{
	background: #333;
	color:#fff;
	padding: 5px 15px 3px;
	line-height: 1.2;
	display: inline-block;
	letter-spacing: 2px;
}
.coupon_texts h3:not(:first-child){
	margin-top:1em;
}
.shoplinks{
	margin: 0.5em 0 0;
	line-height: 2;
}
.shop{
	text-decoration: underline;
	display: inline-block;
}
.coupon_limit{
	font-weight:bold;
	font-size:110%;
	margin:0.5em 0 0;
	line-height:1.3;
}
.notes{
	margin: 2em 0 0;

}
.note{
	padding:0 0 0 1em;
	font-size: 15px;
	line-height: 1.4;
	text-indent:-1em;
	margin: 0.3em 0 0;
}
.note:before{
	content:"●";
	padding:0 0.3em 0 0
}

#jyusho{
	padding:30px 0;
}
#jyusho_inner{
	width:90%;
	max-width: 1400px;
	margin:0 auto;
}
.title_img_wrapper{
	margin: 40px 0 20px;
}
.title_img_wrapper:first-child{
	margin-top:0;
}
.jyusho_lead{
	text-align:center;
	font-weight:bold;
	font-size:140%;
	letter-spacing:1px;
	color:#1b284f;
}

.jyusho_list{
	display: flex;grid-template-columns:repeat(3,1fr); 
	gap:48px;
	box-sizing:border-box;
	padding:40px 0 70px;
	flex-wrap:wrap;
	justify-content:center;
	
}

/* ====== 1 枚のカード ====== */
.jyusho_item{
  position:relative;
  background:#fff;
  padding: 30px 45px 30px 22px;
  display:flex;
  align-items:stretch;
  box-sizing:border-box;
  box-shadow: 8px 8px 0 #aa9d7f80;
  font-family: "ten-mincho", serifserif;
  font-feature-settings: "vert" 1, "vkrn" 1, "palt" 0;
  -webkit-font-feature-settings: "vert" 1, "vkrn" 1, "palt" 0;
}


.jyusho_item_award{
  position:absolute;
  top:-19px;
  right:-13px;
  color: #ffe67f;
  font-weight:700;
  writing-mode:vertical-rl;
  text-orientation:upright;
  padding: 15px 0 15px;
  font-size:18px;
  line-height: 1;
  background: #3b46a5;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform-origin: center;
  font-weight: bold;
}

.jyusho_item_award::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom: 0;
  width:0;
  height:0;
  border: solid;
  border-color: #3b46a5 #3b46a5 transparent;
  transform: scaleY(0.8) translateY(100%);
  border-width: 5px 20px 20px;
	
}

.theme2025 .jyusho_item_award{
  background: #f2702e;
  color:#ffe37e;
}
.theme2025 .jyusho_item_award::before{
  border-color: #f2702e #f2702e transparent;
}

.jyusho_item_author
{
	order:-1;align-self:flex-end;writing-mode:vertical-rl;text-orientation:upright;font-weight:700;font-size: 18px;line-height: 1.2;color:#1c2a4b;margin-right: 20px;margin-bottom: -10px;}
.jyusho_item_author_address{
	font-size:80%;
}


.jyusho_item_text{
	margin: 0 0 0 auto;
	display:flex;
	flex:1;
	flex-direction:row-reverse;
}

.jyusho_item_row{
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 28px;
    line-height: 1.1;
    color: #1c2a4b;
    padding: 5px 13px;
    display: block;
    flex-shrink: 1;
    border-left: 1px solid #1c2a4b9c;
    width: 1.1em;
}

.jyusho_item_row:first-child{
	border-right:1px solid #1c2a4b9c;
}
.jyusho_list-aiueo .jyusho_item_row{
	font-size: 24px;
}
.jyusho_list-aiueo .jyusho_item_row:before{
	content:"あ";
	color:#fff;
	font-size:80%;
	text-align:center;
	line-height:23px;
	width:24px;
	height:24px;
	display:inline-block;
	background:#1c2a4b55;
	border-radius:24px;
	margin:0 0 0.25em;
}
.jyusho_list-aiueo .jyusho_item_row:nth-child(2):before{
	content:"き";
}
.jyusho_list-aiueo .jyusho_item_row:nth-child(3):before{
	content:"す";
}

/*
@media (max-width:680px){
	.jyusho_list{
	gap:25px 25px;
	}
	.jyusho_item{
	padding:20px 25px 20px 16px;
	justify-content: center;
	}
	.jyusho_item_award{
	 font-size:15px;
	 width: 30px;
	 padding: 10px 0 10px;
	top:-10px;
	}
	.jyusho_item_award::before{
	border-width: 5px 15px 15px;
	
	}
	.jyusho_item_text{
	margin:0;
	flex: 0;
	}
	.jyusho_item_row{
	font-size:18px;
	min-height:0;
	padding:5px 5px;
	}
	.jyusho_item_author{
	font-size:14px;
	margin-right:10px;
	}

}
*/

/* 
エコ建築 キャンペーンLP
川柳 2026
style.css
*/