@charset "utf-8";

/* ****************************************************

初期化

**************************************************** */

* { margin: 0; padding: 0; box-sizing: border-box;}

html { height: 100%; font-size: 62.5%; font-feature-settings: "palt"; scroll-behavior: smooth; scroll-padding-top: 20px;}
html, body { height: 100%; background: #fff;}

/* ****************************************************

ラッパー

**************************************************** */

#contents { width: 900px; margin-left: auto; margin-right: auto; padding: 0; font-family: 'Noto Serif JP', serif; color: #333; font-size: 1.8rem; line-height: 1.8em; font-feature-settings: "palt"; background: #fff; position: relative;}
#contents .contents_inner_wrapper { width: 100%;}

#contents .harf_wrapper_l { width: 57%;}
#contents .harf_wrapper_s { width: 40%;}

@media screen and (max-width: 900px) {
 #contents { width: 100%; padding: 0;}
 #contents .contents_inner_wrapper { padding: 0 15px;}
}

@media screen and (max-width: 767px) {
 #contents { font-size: 1.4rem;}
 #contents .harf_wrapper_l { width: 100%;}
 #contents .harf_wrapper_s { width: 100%;}
}


/* ****************************************************

文字

**************************************************** */

#contents p { font-size: 1.8rem; line-height: 1.8em; margin: 0 0 30px 0; padding: 0;}
#contents h2 { font-size: 2.8rem; color: #fff; text-align: center; line-height: 1.2em; letter-spacing: 0.03em; padding: 10px 60px; margin: 0 0 30px 0; background-color: #58c6df;}
#contents h2.big_title { display: inline-block; width: auto; font-size: 3.2rem; line-height: 1.0em; letter-spacing: 0.04em; color: #333; padding: 16px 40px; background: url("../images/bg01_h2.png") repeat; position: absolute; right: 0; top: 40px;}
#contents h3 { font-size: 2.8rem; color: #579ade; letter-spacing: 0.03em; margin: 0 0 30px 0; position: relative;}
#contents h3:after { content: ""; width: calc(100% + 10%); height: 1px; background: #58c6df; position: absolute; bottom: -10px; left: -5%;}
#contents h4 { font-size: 2.4rem; color: #333; margin: 0 0 20px 0; padding: 0;}
#contents h5 { font-size: 2.0rem; color: #333; margin: 0 0 6px 0; padding: 0;}

#contents p.note { font-size: 1.4rem; line-height: 1.6em; margin: 0;}

#contents .sub { font-size: 60%;}

@media screen and (max-width: 767px) {
 #contents p { font-size: 1.4rem;}
 #contents h2 { font-size: 1.8rem; padding: 10px 20px;}
 #contents h2.big_title { font-size: 2.0rem; padding: 10px 20px; top: 20px;}
 #contents h3 { font-size: 1.7rem;}
 #contents h4 { font-size: 1.6rem;}
 #contents h5 { font-size: 1.5rem;}
 #contents p.note { font-size: 1.1rem;}
}

#contents ul.note_list { margin: 0; padding: 0; list-style-type: none;}
#contents ul.note_list li { font-size: 1.4rem; line-height: 1.6em; padding-left: 16px; position: relative;}
#contents ul.note_list li:before { content: "※"; position: absolute; left: 0;}

@media screen and (max-width: 767px) {
 #contents ul.note_list li { font-size: 1.1rem;}
}

/* ****************************************************

クリアフィックス

**************************************************** */

#contents .cf:after { width: 100%; clear:both;}
#contents .cf { width: 100%; display: inline-block;}
*:first-child+html #contents .cf:after { width: 100%; clear: both !important; visibility: hidden; height: 0px; overflow : hidden !important;}


/* ****************************************************

クリアランス

**************************************************** */

/* pc版クリアランス */
#contents .cl_pc120 { margin-bottom: 120px !important;}
#contents .cl_pc100 { margin-bottom: 100px !important;}
#contents .cl_pc80 { margin-bottom: 80px !important;}
#contents .cl_pc60 { margin-bottom: 60px !important;}
#contents .cl_pc50 { margin-bottom: 50px !important;}
#contents .cl_pc30 { margin-bottom: 30px !important;}

@media screen and (max-width: 767px) {
#contents .cl_pc120 { margin-bottom: 60px !important;}
#contents .cl_pc100 { margin-bottom: 50px !important;}
#contents .cl_pc80 { margin-bottom: 40px !important;}
#contents .cl_pc60 { margin-bottom: 30px !important;}
#contents .cl_pc50 { margin-bottom: 25px !important;}
#contents .cl_pc30 { margin-bottom: 15px !important;}
}

/* smp版クリアランス */
#contents .cl_sm20 { margin-bottom: 10px !important;}
#contents .cl_sm40 { margin-bottom: 20px !important;}

@media screen and (max-width: 767px) {
#contents .cl_sm20 { margin-bottom: 20px !important;}	
#contents .cl_sm40 { margin-bottom: 40px !important;}	
}

/* 固定クリアランス */
#contents .cl_10 { margin-bottom: 10px !important;}
#contents .cl_20 { margin-bottom: 20px !important;}
#contents .cl_30 { margin-bottom: 30px !important;}


/* ****************************************************

共通パーツ

**************************************************** */

#contents .center { text-align: center;}
#contents img.center { margin-left: auto !important; margin-right: auto !important; text-align: center !important;}
#contents .flotLeft { float: left;}
#contents .flotRight { float: right;}
#contents p.right { text-align: right;}

#contents .position_basis { position: relative;}

#contents .img-responsive { width: 100%; height: auto;}

#contents table { width: 100%; border: none; border-collapse: collapse; border-spacing: 0;}
#contents table td, #contents table th { padding: 4px 10px; border: 1px solid #58c6df; vertical-align: middle;}
#contents table th { background: #e1f1f5; text-align: center;}
#contents table td { background: #fff;}
#contents table td.price { font-size: 2.0rem; font-weight: bold; text-align: right; color: #e73562; white-space: nowrap;}
#contents table td.price span { font-size: 1.4rem;}
#contents table td.center { text-align: center;}

/* 標準ボタン */
#contents a.common_btn { display: inline-block; min-width: 260px; white-space: nowrap; padding: 10px; margin: auto; text-align: center; background: #fff; border: 2px solid #ffc208; border-radius: 10px; position: relative; transition: 0.3s all ease-out; left: 50%; transform: translateX(-50%);}
#contents a.common_btn:after { content: ""; width: 10px; height: 12px; background: url("../images/arrow_right.png") no-repeat; background-size: cover; position: absolute; right: 6px; top: 42%;}

#contents a.common_btn:link, #contents a.common_btn:visited, #contents a.common_btn:hover, #contents a.common_btn:active { color: #333; text-decoration: none;}
#contents a.common_btn:hover { background: #ffc208;}

@media screen and (max-width: 767px) {
 #contents .flotLeft { float: none;}
 #contents .flotRight { float: none;}
 
 #contents table td.price { font-size: 1.8rem;}
 #contents table td.price span { font-size: 1.2rem;}
 
 #contents a.common_btn { padding: 16px 10px;}
 
}


/* ****************************************************

スマホ改行

**************************************************** */

br.smp_break { display: none; width: 0; height: 0; visibility: hidden; content: ""; font-size:0;}

@media screen and (max-width: 767px) {
 br.smp_break { display: block;}
}


/* ****************************************************

コンテンツ

**************************************************** */

#contents .main_visual { width: 100%; aspect-ratio: 9/7; position: relative;}
#contents .main_visual .slide { width: 94%; aspect-ratio: 10/7.25;}

#contents .main_visual .logo { width: 15%; aspect-ratio: 160/50; position: absolute; top: 20px; left: 20px;}
#contents .main_visual .deco01 { width: 60%; aspect-ratio: 1052/711; background: url("../images/visual_deco.png") no-repeat; background-size: cover; position: absolute; right: 10px; bottom: 0;}

@media screen and (max-width: 767px) {
 #contents .main_visual .logo { width: 30%;}
}

/* ****************************************************
都市ガス導入の賃貸物件を見る */
#contents .main_visual a { display: block; width: 30%; aspect-ratio: 33.75/22; position: absolute; left: 10px; bottom: -20px; z-index: 1; transition: 0.3s all ease-out;}


/* ****************************************************
メリットまとめ */

#contents .merit_wrapper { text-align: center;}
#contents .merit_wrapper h2 { display: inline-block; white-space: nowrap; width: auto; margin-bottom: 30px;}
#contents .merit_wrapper p { font-size: 2.0rem; line-height: 1.8em; text-align: center; margin-bottom: 10px;}
#contents .merit_wrapper p.threemerit { display: inline-block; font-size: 2.6rem; text-align: center; width: auto; padding: 0; background:linear-gradient(transparent 60%, #ff6 60%);}

#contents .merit_wrapper ul { margin: 0; padding: 0; list-style-type: none; text-align: center;}
#contents .merit_wrapper ul li { display: inline-block; width: 26%; padding: 0 5%;}

@media screen and (max-width: 767px) {
 #contents .merit_wrapper p { font-size: 1.4rem;}
 #contents .merit_wrapper p.threemerit { font-size: 1.5rem;}
 #contents .merit_wrapper ul li { width: 30%; padding: 0 2%;}
}


/* ****************************************************
メリット01 */

#contents .merit01_wrapper { padding: 22% 5% 5% 5%; background: rgba(208,200,226,0.2); border-radius: 20px; position: relative;}
#contents .merit01_wrapper .icon_merit { width: 178px; height: 178px; background: url("../images/merit01_icon.png") no-repeat; background-size: cover; position: absolute; left: 40px; top: -40px;}

#contents .merit01_wrapper .deco01 { width: 265px; height: 231px; background: url("../images/merit01_deco01.png") no-repeat; background-size: cover; position: absolute; top: 0; right: 0;}
#contents .merit01_wrapper .deco02 { width: 263px; height: 223px; background: url("../images/merit01_deco02.png") no-repeat; background-size: cover; position: absolute; top: 30px; left: 30px;}

#contents .logo_marutoku { width: 204px; height: 85px;}
#contents .logo_marutoku img { height: 100%; width: auto;}

#contents .responsive_wrapper { width: 60%; margin: 0 auto 40px auto;}

@media screen and (max-width: 900px) {
 #contents .responsive_wrapper { width: 80%;}
}

@media screen and (max-width: 900px) {
 #contents .merit01_wrapper { border-radius: 0;}
}

@media screen and (max-width: 767px) {
 #contents .merit01_wrapper { padding-top: 120px;}
 #contents .merit01_wrapper .icon_merit { width: 100px; height: 100px; left: 20px; top: -20px;}
 #contents .merit01_wrapper .deco01 { width: 265px; height: 231px; margin: auto; position: relative; top: 0; right: 0; left: 0;}
 #contents .merit01_wrapper .deco02 { width: 263px; height: 223px; margin: 40px auto 0 auto; position: relative; top: 0; right: 0; left: 0;}
}


/* ****************************************************
物件をさガス */

#contents .look_wrapper { background: rgba(255,194,8,0.1); padding: 40px; border-radius: 20px;}
#contents .look_wrapper h2 { background-color: #fff9e6; padding: 0; background: url("../images/bg02_h2.png") repeat-x; background-size: auto 12px; background-position: center; position: relative;}
#contents .look_wrapper h2 span { display: inline; padding: 0 20px; font-size: 3.6rem; font-weight: normal; color: #ffc208; background-color: none; text-align: center; background: #fff9e6;}
#contents .look_wrapper h2:after { content: "●●●"; font-size: 8px; color: #e73562; letter-spacing: 4.0em; position: absolute; top: -26px; left: 49%;}

#contents .look_wrapper ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style-type: none;}
#contents .look_wrapper ul li { width: 50%; padding: 0 1% 15px 1%;}
#contents .look_wrapper ul li a { display: block; width: 100%; padding: 10px 0; text-align: center; background: #fff; border: 2px solid #ffc208; border-radius: 10px; position: relative; transition: 0.3s all ease-out;}
#contents .look_wrapper ul li a:after { content: ""; width: 10px; height: 12px; background: url("../images/arrow_right.png") no-repeat; background-size: cover; position: absolute; right: 10px; top: 42%;}

#contents .look_wrapper ul li a:link, #contents .look_wrapper ul li a:visited, #contents .look_wrapper ul li a:hover, #contents .look_wrapper ul li a:active { color: #333; text-decoration: none;}
#contents .look_wrapper ul li a:hover { background: #ffc208;}

@media screen and (max-width: 900px) {
 #contents .look_wrapper { padding: 5%; border-radius: 0;}
}

@media screen and (max-width: 767px) {
 #contents .look_wrapper h2 span { font-size: 2.2rem;}
 #contents .look_wrapper h2:after { font-size: 0.6rem;letter-spacing: 3.0em; top: -16px; left: 49%;}
 #contents .look_wrapper ul li { width: 80%; margin: auto;}
 #contents .look_wrapper ul li a { padding: 16px 0;}
}


/* ****************************************************
メリット02 */

#contents .merit02_wrapper { padding: 22% 5% 5% 5%; background: rgba(173,218,198,0.2); border-radius: 20px; position: relative;}
#contents .merit02_wrapper .icon_merit { width: 178px; height: 178px; background: url("../images/merit02_icon.png") no-repeat; background-size: cover; position: absolute; left: 40px; top: -40px;}

#contents .merit02_wrapper .merit02_title { width: 80%; margin: auto;}

#contents .merit02_wrapper ul.merit_list { display: flex; flex-wrap: wrap;}
#contents .merit02_wrapper ul.merit_list li { width: 25%; padding: 0 10px;}

@media screen and (max-width: 900px) {
 #contents .merit02_wrapper { border-radius: 0;}
}

@media screen and (max-width: 767px) {
 #contents .merit02_wrapper { padding-top: 120px;}
 #contents .merit02_wrapper .icon_merit { width: 100px; height: 100px; left: 20px; top: -20px;}
 #contents .merit02_wrapper ul.merit_list li { width: 50%; margin-bottom: 10px;}
}


/* ****************************************************
メリット03 */

#contents .merit03_wrapper { padding: 22% 5% 5% 5%; background: rgba(170,232,238,0.2); border-radius: 20px; position: relative;}
#contents .merit03_wrapper .icon_merit { width: 178px; height: 178px; background: url("../images/merit03_icon.png") no-repeat; background-size: cover; position: absolute; left: 40px; top: -40px;}

#contents .merit03_wrapper .deco01 { width: 265px; height: 231px; background: url("../images/merit03_deco01.png") no-repeat; background-size: cover; position: absolute; top: 100px; right: 0;}

#contents .merit03_wrapper .eco_wrapper { width: 80%; margin: auto; position: relative;}
#contents .merit03_wrapper .eco_wrapper img { width: 100%; height: auto;}
#contents .merit03_wrapper .eco_wrapper .deco02 { width: 140px; height: 166px; background: url("../images/merit03_deco02.png") no-repeat; background-size: cover; position: absolute; bottom: 42%; right: -100px;}

/* ふわふわアニメーション */
@keyframes fuwa {
 0%, 100% { transform: translateY(0);}
 50% { transform: translateY(-20px);}
}

.anime-fuwa { animation: 3s fuwa infinite;}

#contents .merit03_wrapper h4.plan_m { font-size: 3.0rem; color: #1a66bc;}
#contents .merit03_wrapper h4.plan_l { font-size: 3.0rem; color: #d32a2a;}

#contents .merit03_wrapper .deco03 { width: 265px; height: 231px; background: url("../images/merit03_deco03.png") no-repeat; background-size: cover; position: absolute; top: -20px; right: 0;}
#contents .merit03_wrapper .deco04 { width: 265px; height: 231px; background: url("../images/merit03_deco04.png") no-repeat; background-size: cover; position: absolute; top: -20px; right: 0;}

@media screen and (max-width: 900px) {
 #contents .merit03_wrapper { border-radius: 0;}
}

@media screen and (max-width: 767px) {
 #contents .merit03_wrapper { padding-top: 120px;}
 #contents .merit03_wrapper .icon_merit { width: 100px; height: 100px; left: 20px; top: -20px;}
 #contents .merit03_wrapper .deco01 { width: 265px; height: 231px; margin: auto; position: relative; top: 0; right: 0; left: 0;}
 #contents .merit03_wrapper .deco03 { width: 265px; height: 231px; margin: auto; margin-bottom: 20px; position: relative; top: 0; right: 0; left: 0;}
 #contents .merit03_wrapper .deco04 { width: 265px; height: 231px; margin: auto; margin-bottom: 20px; position: relative; top: 0; right: 0; left: 0;}
 #contents .merit03_wrapper .eco_wrapper { width: 94%;}
 #contents .merit03_wrapper .eco_wrapper .deco02 { width: 70px; height: 83px; right: -20px;}
 #contents .merit03_wrapper h4.plan_m { font-size: 2.4rem;}
 #contents .merit03_wrapper h4.plan_l { font-size: 2.4rem;}
}

/* ****************************************************
物件一覧 */

#contents ul.house_list { display: flex; flex-wrap: wrap; margin: 0 0 60px 0; padding: 0; list-styel-type: none;}
#contents ul.house_list li { width: 50%; padding: 0 1% 15px 1%;}
#contents ul.house_list li .house_wrapper { width: 100%; height: 100%; border: 1px solid #cdcdcd;}
#contents ul.house_list li .house_wrapper .photo_wrapper { position: relative;}
#contents ul.house_list li .house_wrapper .photo_wrapper img { width: 100%; height: auto;}
#contents ul.house_list li .house_wrapper .photo_wrapper span { display: inline-block; font-size: 1.2rem; line-height: 1.0em; padding: 8px 20px; background: #ffc208; position: absolute; bottom: 0; left: 20px;}

#contents ul.house_list li .house_wrapper .text_wrapper { padding: 20px;}
#contents ul.house_list li .house_wrapper .text_wrapper h5 { margin-bottom: 6px;}
#contents ul.house_list li .house_wrapper .text_wrapper p { font-size: 1.2rem; line-height: 1.4em; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #cdcdcd;}
#contents ul.house_list li .house_wrapper .text_wrapper dl { display: flex; flex-wrap: wrap; width: 100%; margin: 0 0 20px 0; padding: 0; line-height: 1.4em;}
#contents ul.house_list li .house_wrapper .text_wrapper dl dt { width: 17%; font-size: 1.2rem; line-height: 1.6em;}
#contents ul.house_list li .house_wrapper .text_wrapper dl dd { width: 83%; font-size: 1.2rem; line-height: 1.6em;}

#contents ul.house_list li .house_wrapper .text_wrapper a { display: block; width: 60%; padding: 10px 0; margin: auto; text-align: center; background: #fff; border: 2px solid #ffc208; border-radius: 10px; position: relative; transition: 0.3s all ease-out;}
#contents ul.house_list li .house_wrapper .text_wrapper a:hover { background: #ffc208;}
#contents ul.house_list li .house_wrapper .text_wrapper a:after { content: ""; width: 10px; height: 12px; background: url("../images/arrow_right.png") no-repeat; background-size: cover; position: absolute; right: 10px; top: 42%;}

#contents ul.house_list li .house_wrapper .text_wrapper a:link, #contents ul.house_list li .house_wrapper .text_wrapper a:visited, #contents ul.house_list li .house_wrapper .text_wrapper a:hover, #contents ul.house_list li .house_wrapper .text_wrapper a:active { color: #333; text-decoration: none;}

@media screen and (max-width: 767px) {
 #contents ul.house_list { display: block;}
 #contents ul.house_list li { width: 100%; padding: 0 0 15px 0;}
 #contents ul.house_list li .house_wrapper .text_wrapper a { padding: 16px 0;}
}


/* ****************************************************
エリアマップ */

#contents .areamap_wrapper { width: 80%; aspect-ratio: 2.04/1.317; margin: 0 auto 60px auto; background: url("../images/map_hirosima.png") no-repeat; background-size: cover;}

#contents .areamap_wrapper ul { width: 100%; height: 100%; position: relative;}
#contents .areamap_wrapper ul li { position: absolute;}
#contents .areamap_wrapper ul li:nth-of-type(1) { top: 45%; left: 0%;} /* 廿日市市 */
#contents .areamap_wrapper ul li:nth-of-type(2) { top: 25%; left: 15%;} /* 広島市 */
#contents .areamap_wrapper ul li:nth-of-type(3) { top: 52%; left: 36%;} /* 安芸郡 */
#contents .areamap_wrapper ul li:nth-of-type(4) { top: 35%; left: 55%;} /* 三原市・尾道市・東広島市 */
#contents .areamap_wrapper ul li:nth-of-type(5) { top: 74%; left: 30%;} /* 呉市 */

#contents .areamap_wrapper ul li a { display: block; white-space: nowrap; padding: 10px 30px 10px 10px; margin: auto; text-align: center; background: rgba(255,255,255,0.8); border: 2px solid #ffc208; border-radius: 10px; position: relative; transition: 0.3s all ease-out;}
#contents .areamap_wrapper ul li a:after { content: ""; width: 10px; height: 12px; background: url("../images/arrow_right.png") no-repeat; background-size: cover; position: absolute; right: 6px; top: 42%;}

#contents .areamap_wrapper ul li a:link, #contents .areamap_wrapper ul li a:visited, #contents .areamap_wrapper ul li a:hover, #contents .areamap_wrapper ul li a:active { color: #333; text-decoration: none;}
#contents .areamap_wrapper ul li a:hover { background: #ffc208;}

@media screen and (max-width: 900px) {
 #contents .areamap_wrapper { width: 90%;}
}

@media screen and (max-width: 767px) {
 #contents .areamap_wrapper { width: 100%;}
 #contents .areamap_wrapper ul li a { font-size: 1.2rem; padding: 16px 30px 16px 10px;}
 #contents .areamap_wrapper ul li:nth-of-type(1) { top: 48%; left: 6%;} /* 廿日市市 */
 #contents .areamap_wrapper ul li:nth-of-type(2) { top: 30%; left: 20%;} /* 広島市 */
 #contents .areamap_wrapper ul li:nth-of-type(3) { top: 46%; left: 33%;} /* 安芸郡 */
 #contents .areamap_wrapper ul li:nth-of-type(4) { top: 30%; left: 60%;} /* 三原市・尾道市・東広島市 */
 #contents .areamap_wrapper ul li:nth-of-type(5) { top: 66%; left: 40%;} /* 呉市 */
}

@media screen and (max-width: 575px) {
 #contents .areamap_wrapper { width: 100%;}
 #contents .areamap_wrapper ul li a { font-size: 1.2rem; padding: 16px 30px 16px 10px;}
 #contents .areamap_wrapper ul li:nth-of-type(1) { top: 48%; left: 0%;} /* 廿日市市 */
 #contents .areamap_wrapper ul li:nth-of-type(2) { top: 15%; left: 5%;} /* 広島市 */
 #contents .areamap_wrapper ul li:nth-of-type(3) { top: 52%; left: 40%;} /* 安芸郡 */
 #contents .areamap_wrapper ul li:nth-of-type(4) { top: 6%; left: 56%;} /* 三原市・尾道市・東広島市 */
 #contents .areamap_wrapper ul li:nth-of-type(5) { top: 82%; left: 30%;} /* 呉市 */
}

/* ****************************************************
スマホ用フロートアンカーメニュー */

#contents ul.smp_float_anchor_menu { display: none;}

@media screen and (max-width: 767px) {
 #contents ul.smp_float_anchor_menu { display: flex; flex-wrap: nowrap; width: 100%; margin: 0; padding: 0; position: fixed; left: 0; bottom: -80px; transition: 0.5s all ease-out;}
 #contents ul.smp_float_anchor_menu li { width: 33.333%; padding: 10px 0; background: rgba(87,154,222,0.8); border-right: 1px solid #fff; display: grid; place-content: center;}
 #contents ul.smp_float_anchor_menu li:last-child { border-right: none;}
 #contents ul.smp_float_anchor_menu li a { display: block; font-size: 1.4rem; line-height: 1.2em; text-align: center; color: #fff;}
 #contents ul.smp_float_anchor_menu li a:link, ul.smp_float_anchor_menu li a:hover, ul.smp_float_anchor_menu li a:visited, ul.smp_float_anchor_menu li a:active { text-decoration: none;}
 #contents ul.smp_float_anchor_menu.open { bottom: 0;}
}

/* ****************************************************
フッター */

#contents .footer_hiroshima { border-top: 4px solid #00a13f; padding: 30px 0; text-align: center;}
#contents .footer_hiroshima img { margin-left: auto; margin-right: auto;}
#contents .footer_hiroshima p { font-size: 1.4rem; line-height: 1.4em; text-align: center; margin-bottom: 0;}

@media screen and (max-width: 767px) {
 #contents .footer_hiroshima { padding-bottom: 70px;}
 #contents .footer_hiroshima img { width: 120px; height: auto;}
}