@charset "UTF-8";

/*-------------------------
__page_style
-------------------------*/

#campaign{ text-align: center; width: 860px; background-color: #faf0be; position: relative; z-index: 0;}
#campaign:before{ content: ''; display: block; width: 100%; height: 652px; background: url("images/top_back.png") no-repeat center top / cover; z-index: 5; position: absolute; top: 0;}
#campaign .campaign_inner{ padding: 0 40px; box-sizing: border-box;}
/*#campaign .campaign_inner{ background-image: url(images/title_back@2x.png); background-size: 100% auto; background-position: top center; background-repeat: no-repeat; padding: 40px; box-sizing: border-box;}
#campaign .campaign_inner .top_title{ background-color: #f04632; color: #fff; text-align: center; font-size: 2.2em; font-weight: 700; width: 100%; padding: 11px 0 8px; box-sizing: border-box; position: absolute; top: 0; left: 0;}
.campaign_end_b{ text-align: center; margin:50px 0 60px;}
#campaign:before{ content: ''; display: block; background-color: rgba(40,40,40,0.8); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100;}
#campaign .campaign_end{ position: absolute; top: 470px; left: 50%; transform: translateX(-50%); z-index: 101;}
#campaign .campaign_end > p{ width: 752px; height: 393px;}
#campaign .campaign_end > p img{ width: 100%; height: auto;}*/

.main_title{ margin-bottom: 30px; position: relative; z-index: 10;}
.main_title .title01{ width: 259px; height: 37px; margin: 0 auto; padding-top: 50px;}
.main_title .title02{ width: 696px; height: 242px; margin: 0 auto;}
.main_title .title03{ width: 575px; height: 38px; margin: 30px auto 0;}
.main_title .title04{ margin: 20px auto; font-size: 17px; line-height: 27px; font-weight: 700; color: #644614;}
.main_title img{ width: 100%; height: auto;}

#present01,
#present02{ background-color: #fff; border-radius: 20px; box-sizing: border-box; position: relative; z-index: 10; padding: 10px 0 20px; box-sizing: border-box;}

#present01 .inner > div{ width: 100%; height: auto;}
#present01 .inner > div img{ width: 100%; height: auto; display: inline-block;}
#present01 .inner .present01_01 img{ margin-top: -30px;}
#present01 .inner .present01_04 img{ margin-top: -30px;}
#townmap{ width: calc(100% + 80px); height: auto; margin:20px 0 20px -40px;}
#townmap img{ width: 100%; height: auto;}
#present02 .inner > div{ width: 100%; height: auto; position: relative;}
#present02 .inner > div img{ width: 100%; height: auto;}
#present02 .inner > div p{ position: absolute; top: 15px; right: -25px; width: 146px; height: auto;}
#present02 .inner .present02_01 img{ margin-top: -20px;}
.giftee_link{ width: 50%; margin-left: 48%;}
.giftee_link a{ display: inline-block; font-size: 1.3em; background-color: #ffbda1; border-radius: 5px; padding: 10px 15px; box-sizing: border-box; text-decoration: none; color: #000; transition: all 0.3s;}
.giftee_link a:hover{ opacity: 0.6;}
#under_data{ text-align: left; color: #644614; font-size: 1.2em; line-height: 1.6em; margin-top: 30px; padding-bottom: 70px; position: relative;}
#under_data p{ margin-bottom: 20px;}
#under_data .towa_house_logo{ width: 225px; margin: 0 auto;}
#under_data .towa_towawa{ position: absolute; bottom: -8px; right: 0;}

/*-------------------------
__shop_map
-------------------------*/
.map2{ width: 860px; height: 638px; margin-top: 30px;}
.map2 > .inner{ width: 100%; height: 100%; background-image: url("/images/shop/map_shop.jpg"); background-size: cover; border-radius: 10px; position: relative;}
.map2 > .inner ul li > p{ position: absolute; font-size: 19px; background-color: #004DA0; padding: 0 10px; box-sizing: border-box; color: #fff; border-radius: 5px; font-weight: 700; text-align: center; height: 37px; line-height: 40px;}
.map2 > .inner ul li > p a{ display: inline-block; color: #fff!important; text-decoration: none;}
.map2 > .inner ul li > p.active{ background-color: #39A5FC;}
.map2 > .inner ul li > p:hover{ cursor: pointer;}
.map2 > .inner ul li .shop_data{ position: absolute; z-index: 100;}

/*========================== 各店舗名表示位置 ==========================*/
.map2 > .inner ul li.asaka > p{ top: 107px; left: 270px;}
.map2 > .inner ul li.kiyose > p{ top: 199px; left: 378px;}
.map2 > .inner ul li.higashikurume > p{ top: 199px; left: 470px;}
.map2 > .inner ul li.oizumigakuen > p{ top: 199px; left: 600px;}
.map2 > .inner ul li.kumegawa > p{ top: 280px; left: 405px;}
.map2 > .inner ul li.tanashi > p{ top: 280px; left: 556px;}
.map2 > .inner ul li.hachioji > p{ top: 370px; left: 33px;}
.map2 > .inner ul li.toyoda > p{ top: 370px; left: 150px;}
.map2 > .inner ul li.tachikawa > p{ top: 370px; left: 250px;}
.map2 > .inner ul li.kokubunji > p{ top: 370px; left: 394px;}
.map2 > .inner ul li.mitaka > p{ top: 370px; left: 528px;}
.map2 > .inner ul li.ogikubo > p{ top: 370px; left: 629px;}
.map2 > .inner ul li.hino > p{ top: 470px; left: 160px;}
.map2 > .inner ul li.fucyu > p{ top: 470px; left: 350px;}
.map2 > .inner ul li.chofu > p{ top: 470px; left: 513px;}
.map2 > .inner ul li.sengawa > p{ top: 470px; left: 635px;}
.map2 > .inner ul li.nagoya > p{ top: 575px; left: 386px; width: 146px; font-size: 15px;}
.map2 > .inner ul li.fukuoka > p{ top: 575px; left: 205px; width: 146px;}
.map2 > .inner ul li.okinawa > p{ top: 575px; left: 24px; width: 146px;}

/*========================== マップ ==========================*/
.map2 > .inner .line{ fill:none; stroke:#79A4C4; stroke-width:3.1736; stroke-miterlimit:10;}
.map2 > .inner .line_name{ fill:#7AA4C4;}
.map2 > .inner .line_name_text{ fill:#FFFFFF; font-size:13px;}
.map2 > .inner .line_jr{ fill:none; stroke:#79A4C4; stroke-width:6.5; stroke-miterlimit:10;}
.map2 > .inner .line_jr_w{ fill:none; stroke:#FFFFFF; stroke-width:3.1736; stroke-miterlimit:10; stroke-dasharray:10.5788,10.5788;}
.map2 > .inner .station_name{ fill:#7AA4C4; font-size:11px; font-weight: 700;}
.map2 > .inner .station_name_s{ font-size:15px; fill:#79A5C4; font-weight: 700;}
.map2 > .inner .station_name_s_w{ font-size:15px; fill:none; stroke:#FFFFFF; stroke-width:4.2315; stroke-linecap:round; stroke-linejoin:round; font-weight: 700;}
.map2 > .inner .station_circle{ fill:#79A4C4;}
.map2 > .inner .station_circle_s{ fill:#FFFFFF; stroke:#79A4C4; stroke-width:3.1736; stroke-miterlimit:10;}
.map2 > .inner .af_back{ fill:#FFFFFF;}
.map2 > .inner .af_border{ fill:#79A4C4;}
.map2 > .inner .af_textback{ fill:#79A4C4;}
.map2 > .inner .af_text{ fill:#FFFFFF; font-size:17px;}
.map2 > .inner .arrow_c{ fill:#004DA0;}
.map2 > .inner .arrow_l{ fill:none; stroke:#004DA0; stroke-width:1.5868; stroke-miterlimit:10;}

/*========================== ホバー時・選択時の線路の色 ==========================*/
.map2 > .inner #line_tojo.active .line{ stroke:#004098;}
.map2 > .inner #line_tojo.active .line_name{ fill:#004098;}
.map2 > .inner #line_ikebukuro.active .line{ stroke:#ff6600;}
.map2 > .inner #line_ikebukuro.active .line_name{ fill:#ff6600;}
.map2 > .inner #line_shinjyuku.active .line{ stroke:#00AAAF;}
.map2 > .inner #line_shinjyuku.active .line_name{ fill:#00AAAF;}
.map2 > .inner #line_cyuo.active .line_jr{ stroke:#F15A22;}
.map2 > .inner #line_cyuo.active .line_name{ fill:#F15A22;}
.map2 > .inner #line_keio.active .line{ stroke:#dd0077;}
.map2 > .inner #line_keio.active .line_name{ fill:#dd0077;}
.map2 > .inner #line_musashino.active .line_jr{ stroke:#F15A22;}
.map2 > .inner #line_musashino.active .line_name{ fill:#F15A22;}

/*========================== ホバー時・選択時の駅・吹き出しの色 ==========================*/
/*JR武蔵野線*/
.map2 > .inner .station_asaka.active .station_circle_s{ stroke:#F15A22;}
.map2 > .inner .station_asaka.active .station_name_s{ fill:#F15A22;}
/*西武池袋線*/
.map2 > .inner .station_kiyose.active .station_circle_s,
.map2 > .inner .station_higashikurume.active .station_circle_s,
.map2 > .inner .station_oizumigakuen.active .station_circle_s{ stroke:#ff6600;}
.map2 > .inner .station_kiyose.active .station_name_s,
.map2 > .inner .station_higashikurume.active .station_name_s,
.map2 > .inner .station_oizumigakuen.active .station_name_s{ fill:#ff6600;}
/*西武新宿線*/
.map2 > .inner .station_kumegawa.active .station_circle_s,
.map2 > .inner .station_tanashi.active .station_circle_s{ stroke:#00AAAF;}
.map2 > .inner .station_kumegawa.active .station_name_s,
.map2 > .inner .station_tanashi.active .station_name_s{ fill:#00AAAF;}
/*JR中央線*/
.map2 > .inner .station_hachioji.active .station_circle_s,
.map2 > .inner .station_toyoda.active .station_circle_s,
.map2 > .inner .station_tachikawa.active .station_circle_s,
.map2 > .inner .station_kokubunji.active .station_circle_s,
.map2 > .inner .station_mitaka.active .station_circle_s,
.map2 > .inner .station_ogikubo.active .station_circle_s{ stroke:#F15A22;}
.map2 > .inner .station_hachioji.active .station_name_s,
.map2 > .inner .station_toyoda.active .station_name_s,
.map2 > .inner .station_tachikawa.active .station_name_s,
.map2 > .inner .station_kokubunji.active .station_name_s,
.map2 > .inner .station_mitaka.active .station_name_s,
.map2 > .inner .station_ogikubo.active .station_name_s{ fill:#F15A22;}
/*京王線*/
.map2 > .inner .station_hino.active .station_circle_s,
.map2 > .inner .station_fucyu.active .station_circle_s,
.map2 > .inner .station_chofu.active .station_circle_s,
.map2 > .inner .station_sengawa.active .station_circle_s{ stroke:#dd0077;}
.map2 > .inner .station_hino.active .station_name_s,
.map2 > .inner .station_fucyu.active .station_name_s,
.map2 > .inner .station_chofu.active .station_name_s,
.map2 > .inner .station_sengawa.active .station_name_s{ fill:#dd0077;}
/*吹き出し矢印*/
.map2 > .inner .active .arrow_c{ fill:#39A5FC;}
.map2 > .inner .active .arrow_l{ stroke:#39A5FC;}

.map2 > .inner ul li .shop_data{display: none; position: absolute;}

/*ご来店予約バナー*/
.banner_fw_shop_reserve{ width: 860px; height: 140px; overflow: hidden; margin: 30px 0;}
.banner_fw_shop_reserve a{ display: block; position: relative; width: 100%; height: 100%;}
.banner_fw_shop_reserve a img{ display: block; width: 860px; height: 280px; position: absolute; top: 0; left: 0; transition: all .3s;}
.banner_fw_shop_reserve a:hover img { top: auto; bottom: 0; opacity: 0.9; filter: brightness(108%);}