@charset "utf-8";
@import url('components.css');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap');


/* common parts
****************************************************/
html.active_nav { overflow: hidden;}


.sp_content { display: none;}
.pc_nodisp { display: none; }

.btn { border:0; display:inline-block; color:#fff; vertical-align:middle; text-decoration:none; text-align:center; padding:15px 20px; font-size:1rem; transition:0.2s; background: linear-gradient(to bottom right, #007BD6, #00A8C6); position:relative; border-radius:60px; min-width:280px; z-index:0; overflow:hidden; box-sizing:border-box; cursor:pointer;}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom right, #1195f7, #11d4f7); opacity:0; transition:0.2s; }
.btn:hover::before { opacity:1;}

.btn.orange { background: linear-gradient(to bottom right, #F5BF0B, #FF5110);}
.btn.orange::before { background: linear-gradient(to bottom right, #ffcf31, #ffae00);}
.btn.green { background: linear-gradient(to bottom right, #57A200, #2CB4AF);}
.btn.green::before { background: linear-gradient(to bottom right, #6BC107, #26D9D3); }
.btn.gray { background:#ddd; color:#333;}
.btn.gray::before { background:#eee;}


.btn.arrow_right,
.btn.arrow_left,
.btn.arrow_bottom { position:relative;}
.btn.arrow_right:after,
.btn.arrow_left:after,
.btn.arrow_bottom:after { position:relative; font-family:'Material Icons'; content:""; position:absolute; font-size:1.4rem; line-height:1; color:#fff; font-weight:normal; transition:0.2s; top:50%; margin-top:-0.7rem;}
.btn.arrow_right:after { content:"\e315"; right:20px; }
.btn.arrow_bottom:after { content:"\e313"; right:20px;}
.btn.arrow_left:after { content:"\e314"; left:20px; color:#333;}

.btn i { vertical-align:middle; margin-left:5px; margin-top:-3px; font-size:1.2rem;}
.btn i.left { margin-left:0; margin-right:5px;}
.btn.mini { font-size:0.9rem; padding:4px 20px;}
.btn.small { font-size:0.9rem; padding:8px 20px;}
.btn.large { font-size:1.2rem; padding:20px 20px; min-width:400px;}
.btn.xlarge { font-size:1.3rem; padding:25px;}
.btn.white { background:#fff; color:#006DBE; }
.btn.white:hover { background:#eee;}
.btn.block { display:block;}


.common_btn_area { margin:0 0 100px; text-align:center;}
.common_btn_area.right { text-align:right;}
.common_btn_area .btn + .btn { margin-left:20px;}
.common_btn_area.wide_margin { margin:40px 0 100px;}
.column2_btn { display:flex; flex-wrap:wrap; justify-content:space-between;}
.column2_btn .btn { width:49%; margin-bottom:10px;}

.column4_btn { display:flex; flex-wrap:wrap; justify-content:space-between;}
.column4_btn li { width:calc(( 100% - 45px ) / 4); margin-bottom:15px;}
.column4_btn li .btn { width:100%;}

a.reverse_line { text-decoration:none;}
a.reverse_line:hover { text-decoration:underline;}
.label { background:#033d73; color:#fff; padding:5px 10px; display:inline-block; text-align:center; font-size:0.9rem; line-height:1; box-sizing:border-box;}
.label.small { padding:5px 10px 5px; font-size:0.8rem;}
.label.border { background:none; color:#033d73; border:1px solid #033d73;}

.border_link { border-bottom:1px solid; text-decoration:none; padding-bottom:5px; position:relative; padding-right:25px;}
.border_link i { font-size:1.3rem; position:absolute; top:50%; right:0; transition:0.2s; line-height:1; margin-top:-0.8rem;}
.border_link:hover i { right:-5px;}
.material-icons { font-size:20px; }
.material-icons.normal { margin-top:-3px; }
.icon_link01 {}
.icon_link01 i { vertical-align:middle; margin-top:-4px; font-size:1.2rem; margin-left:10px; }

.anchor_point { padding-top:50px; margin-top:-50px; }

.bg_gray { background:#f5f5f5; }
.bg_box { padding:50px; border-radius:10px; background:#f4f4f4; }


.section_title { margin-bottom:80px; text-align:center;}
.section_title .tx01 { font-size:2.8rem; font-weight:700; line-height:1.3;}

.common_desc { margin-bottom:70px; }

.img_desc_box { display:flex;}
.img_desc_box .image { width:calc( ( 100% - 70px ) / 2 ); height:500px; display:flex; margin-right:70px;}
.img_desc_box .image img { object-fit:cover;}
.img_desc_box .tx_area { width:calc( ( 100% - 70px ) / 2 ); display:flex; padding-right:7vw; align-content:center; flex-wrap:wrap; box-sizing:border-box;}
.img_desc_box .tx_area .ttl { width:100%;}
.img_desc_box .tx_area .desc { width:100%;}
.img_desc_box .tx_area .btn_area { margin-top:40px;}
.top_page .img_desc_box { margin-bottom: 80px;}


.common_catch { text-align:center; font-size:2.0rem; font-weight:600; margin-bottom:30px; }
.cont_desc { text-align:center; line-height:1.8; margin-bottom:60px;}

.img_nav01 { display:flex; flex-wrap:wrap; }
.img_nav01 li { width:calc( ( 100% - 30px ) / 2 ); margin-right: 30px;}
.img_nav01 li:nth-of-type(2n) { margin-right: 0;}
.img_nav01 li:nth-of-type(n + 3) { margin-top: 30px;}
.img_nav01 li a { position:relative; display:block;}
.img_nav01 li a img { object-fit:cover;}
.img_nav01 li .tx_area { height: 75.59px; background:rgba(0,0,0,0.6); position:absolute; bottom:0; left:0; color:#fff; padding:15px 20px; width:100%; box-sizing:border-box;}
.img_nav01 li .tx_area .tx01 { font-size:0.85rem; line-height:1;}
.img_nav01 li .tx_area .tx02 { font-weight:600; font-size:1.5rem; line-height:1; margin-top:8px;}
.img_nav01 li .tx_area:after { font-family:'Material Icons'; content:"\e315"; position:absolute; right:10px; top:50%; transform: translateY(-50%); font-size:1.8rem; line-height:1; color:#fff; font-weight:normal; transition:0.2s;}

.img_nav02 { display:flex; flex-wrap:wrap; box-sizing:border-box; background:#fff; padding: 30px;}
.img_nav02 li { width:calc( ( 100% - 40px ) / 3 ); margin-right: 20px;}
.img_nav02 li:last-child { margin-right: 0;}
.img_nav02 li a { display:flex; position:relative; justify-content:center;}
.img_nav02 li a img { width: 100%; height: 100%; object-fit:cover;}
.img_nav02 li a:after { content:''; width:100%; height:100%; background:rgba(0,0,0,0.2); position:absolute; top:0; left:0;}
.img_nav02 li a .tx01 { position:absolute; line-height:1; font-size:1.4rem; top:50%; margin-top: -0.7rem; color:#fff; font-weight:600; text-align:center; width:100%; text-shadow:0 0 2px rgba(0,0,0,0.4); z-index:100;}
.img_nav02 li a .tx01:after { content:''; width:16px; height:2px; background:#fff; position:absolute; bottom:-15px; left:50%; margin-left:-8px;}

.column3_bnr { display:flex;}
.column3_bnr li { width:calc( ( 100% - 60px ) / 3 ); margin-right:30px;}
.column3_bnr li:nth-of-type(3n) { margin-right:0;}

.page_title { background:linear-gradient(to right, #007BD6, #4ebac8 ); display:flex; align-items:center; height:300px; position:relative; overflow:hidden; box-shadow:0 -10px 10px rgba(0, 0, 0, 0.08) inset;}
.page_title .tx01 { color:#fff; font-size:2.8rem; font-weight:700; position:relative;z-index:100}
.page_title:after { content:""; display:block; position:absolute; border:150px solid rgba(255,255,255,0.1); border-radius:100%; z-index:1; width:50vw; height:50vw; right:-20vw; top:-4vw;}

.breadcrumb {}
.breadcrumb .container { padding:20px 0;}
.breadcrumb ul { display:flex;}
.breadcrumb ul li { font-size:0.9rem;}
.breadcrumb ul li:after { content:"/"; display:inline-block; margin:0 10px; color:#999;}
.breadcrumb ul li:last-of-type:after { display:none;}
.breadcrumb ul li a, .breadcrumb ul li span { color:#999; text-decoration:none; transition:0.2s;}
.breadcrumb ul li a:hover { opacity:0.6;}

ul.iconbtn_nav01 { display:flex; flex-wrap:wrap;}
ul.iconbtn_nav01 li { width:calc( (100% - 50px) / 3 ); margin-bottom:25px; margin-right:25px;}
ul.iconbtn_nav01 li:nth-of-type(3n) { margin-right:0; }
ul.iconbtn_nav01 li .btn { min-width:0; width:100%;}
ul.iconbtn_nav01 li .btn i { font-size:1.8rem; margin-right:1rem;}



/* layout
****************************************************/
.container { padding:100px 0; width:1200px; margin-left:auto; margin-right:auto; }
.container.narrow { width:900px;}
.cont_block {}
.cont_block + .cont_block { margin-top:100px; }

/* header
****************************************************/
header { display:flex; justify-content:space-between; align-items:center; padding:20px 20px; z-index:10000; position:relative;}
header a { text-decoration:none; transition:0.2s;}
header .logo {}
header .logo a { display: block; width: 400px;}
header .logo img { width:100%;}
header .sp_wrap { display:flex; align-items: center;}
header .tx_nav .main_nav  { display:flex; align-items:center;}
header .tx_nav .main_nav > li { margin-right:30px;}
header .tx_nav .main_nav > li.sp { display:none;}
header .tx_nav .main_nav > li:last-of-type { margin-right:0;}
header .tx_nav .main_nav > li a { font-weight:600; font-size:1.2rem; color:#111; transition:0.2s;}
header .tx_nav .main_nav > li a:hover { opacity:0.6;}
header .tx_nav .main_nav > li.btn_type { display:flex; justify-content:center; align-items:center;}
header .tx_nav .main_nav > li.btn_type a { background: linear-gradient(to bottom right, #F5BF0B, #FF5110); border-radius:50px; padding: 15px 20px; color:#fff; line-height:1; width:; display:block; text-align:center;}
.hamburger { display: none;}

/* drop menu */
header .main_nav li.drop { position:relative;}
header .main_nav li.drop:hover > .drop_item { z-index:100; opacity:1; pointer-events:auto;}
header .drop_item { z-index:-1; opacity:0; position:absolute; top: 20px; left:0; width:350px; transition:0.2s; padding: 15px 0; pointer-events:none;}
header .drop_item ul { padding: 0; background:rgba(0,0,0,0.7);}
header .drop_item li { border-bottom:1px dotted #aaa; text-align:left;}
header .drop_item li:last-of-type { border-bottom:0;}
header .drop_item li a { color:#fff!important; display:block; font-weight: 300 !important; font-size:1rem !important; padding:12px 25px 12px 15px; line-height:1.3; position:relative; transition:0.2s;}
header .drop_item li a:after { font-family:'Material Icons'; content:"\e315"; position:absolute; right: 10px; top:50%; font-size:1.2rem; line-height:1; margin-top:-0.6rem; color:#fff; font-weight:normal; transition:0.2s;}
header .drop_item li a:hover:after { right: 5px;}
header .drop_item li a .material-icons { font-size:16px;vertical-align:middle; margin: -3px 0 0 5px;}
header .drop_item li a:hover { background:rgba(0,0,0,0.5);}


/* footer
****************************************************/
.footer_contact { width:1200px; background:#f2f2f2; border-radius:10px; padding:80px; display:flex; justify-content:space-between; align-items:center; color:#111; margin:100px auto -50px; position:relative; z-index:110; box-sizing:border-box;}
.footer_contact .ttl { font-size:2.0rem; font-weight:700; line-height:1; width:250px;}
.footer_contact .btn { font-size:1.2rem; font-weight:700; width:300px; }
.footer_contact .tel { width:calc( 100% - 300px - 250px - 80px ); }
.footer_contact .tel .ttl { font-size:1.1rem; margin-bottom:10px; }
.footer_contact .tel .tx1 { display:flex; align-items:center; margin-bottom:10px;}
.footer_contact .tel .tx1 .name { padding:8px 10px; border-radius:30px; font-size:0.8rem; color:#fff; line-height:1; margin-right:10px; background:#333;}
.footer_contact .tel .tx1 .num { font-size:2.4rem; line-height:1; font-weight:700;}
.footer_contact .tel .tx2 { font-size:0.8rem; line-height:1; color:#777;}


footer { padding:200px 100px 50px; z-index:100; background:linear-gradient(to bottom right, #1cb8df, #007BD6 ); color:#fff; overflow:hidden; position:relative;}

footer .footer_main { display:flex; justify-content:space-between; margin-bottom:100px; position:relative; z-index:100;}
footer .footer_main .txt { width:340px; } 
footer .footer_main .txt .logo { width:100%;}
footer .footer_main .txt .catch { margin-top:130px; transform:scale(1.15); width:350px;}

footer .footer_main .nav { width:500px;}
footer .footer_main a, footer .footer_bottom a { color:#fff; text-decoration:none; transition:0.2s;}
footer .footer_main a:hover, footer .footer_bottom a:hover { opacity:0.5;}
footer .footer_main .nav .ttl { font-size:1.3rem; font-weight:700; margin-bottom:50px; display:flex; align-items:center;}
footer .footer_main .nav .ttl i { font-size:1.6rem; margin-right:5px;}
footer .footer_main .nav .nav_wrap { display:flex; justify-content:space-between; }
footer .footer_main .nav .group_ttl { margin-bottom:2rem;}
footer .footer_main .nav ul { margin-top: 15px; padding-left:30px;}
footer .footer_main .nav ul li { margin-bottom: 1.4rem; list-style-type:disc;}
footer .footer_main .nav ul li:last-of-type { margin-bottom: 0; line-height:1.5;}

footer .footer_bottom { border-top:1px solid #fff; padding-top:50px; display:flex; justify-content:space-between; position:relative; z-index:100;}
footer .footer_bottom .copyright { color:#fff;}
footer .footer_bottom .sub_nav { display:flex;}
footer .footer_bottom .sub_nav li + li { margin-left:40px;}

footer [class^="obj"] { position:absolute; border:150px solid rgba(255,255,255,0.1); border-radius:100%; z-index:2; }
footer .obj01 { width:40vw; height:40vw; left:-15vw; top:-15vw;}
footer .obj02 { width:30vw; height:30vw; right:-20vw; bottom:-5vw;}


/* top
****************************************************/

.top_intro { position:relative;}
.top_intro .mainimage { width:100%; height:100svh; background:url(/static/images/top_mainimage.jpg) center / cover; position:relative; background-attachment:fixed;}
.top_intro .mainimage .maincatch { width:50vw; position:absolute; top:20%; right:5vw; z-index:100;}

.top_intro .about { position:relative; text-align:center; background:linear-gradient(to bottom right, #007BD6, #14d3dd); color:#fff;}
.top_intro .about .tx01 { font-size:3rem; font-weight:700; margin-bottom:50px;}
.top_intro .about .tx02 { font-size:1.2rem; line-height:2.6; margin-bottom:60px;}

.top_intro [class^="obj"] { position:absolute; border:150px solid rgba(255,255,255,0.15); border-radius:100%; z-index:1; }
.top_intro .obj01 { width:50vw; height:50vw; right:-15vw; top:-15vw; animation: parallax-obj01-anim linear; animation-timeline: scroll();}
.top_intro .obj02 { width:40vw; height:40vw; left:-35vw; top:50vw; animation: parallax-obj02-anim linear; animation-timeline: scroll();}
.top_intro .obj03 { width:40vw; height:40vw; right:-35vw; bottom:-40vw; animation: parallax-obj03-anim linear; animation-timeline: scroll();}

@keyframes parallax-obj01-anim {
  from { transform: translateY(0);}
  to { transform: translateY(-70vw); }
}
@keyframes parallax-obj02-anim {
  from { transform: translateY(0);}
  to { transform: translateY(-85vw); }
}
@keyframes parallax-obj03-anim {
  from { transform: translateY(0);}
  to { transform: translateY(-50vw); }
}

.image_nav01 { display:flex; justify-content:space-between; background:#f2f2f2; border-radius:10px; margin-bottom:50px;}
.image_nav01 .image { width:700px; height:350px; margin-top:30px;}
.image_nav01 .image a { width:100%; height:100%; display:flex; justify-content:center; align-items:center; border-radius:0 10px 0 10px;}
.image_nav01 .image a img { opacity:1!important; transition:linear 20s; width:100%; height:100%; object-fit:cover;}
.image_nav01 .image a:hover img { transform:scale(2.0);}
.image_nav01 .txt { width:calc( 100% - 700px - 40px); margin-left:40px; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.image_nav01 .txt .ttl { font-size:2.4rem; font-weight:700; line-height:1.3; margin-bottom:40px;}
.image_nav01 .txt .desc { font-size:1rem;}
.image_nav01 .txt .btn_area { margin-top:45px;}

.image_nav_column2 { display:flex; justify-content:space-between;}
.image_nav_column2 .item { width:calc( ( 100% - 50px ) / 2); height: 400px; display:flex; position:relative; border-radius:10px; overflow:header; justify-content:center; align-items:center; }
.image_nav_column2 .item img { object-fit:cover; height:100%; transition:linear 10s;}
.image_nav_column2 .item:hover img { transform:scale(1.5);}
.image_nav_column2 .item .txt { width:100%; height:100%; position:absolute; top:0; left:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; text-align:center;}
.image_nav_column2 .item .txt .ttl { font-size:2.4rem; font-weight:700; line-height:1.3; margin-bottom:40px;}
.image_nav_column2 .item .txt .desc { font-size:1rem; line-height:2.0;}
.image_nav_column2 .item .txt .btn_area { margin-top:45px;}

.top_shuppan { margin-top:-180px; }
.top_shuppan .bg_gray { padding-top:60px; overflow:hidden;}
.top_shuppan .container { padding-bottom:0;}
.top_shuppan .item { display:flex; justify-content:space-between;}
.top_shuppan .item > div { width:calc( ( 100% - 50px ) / 2);}
.top_shuppan .item .image { height:380px; position:relative;}
.top_shuppan .item .image .fukidasi { width:160px; height:160px; display:flex; justify-content:center; align-items:center; font-size:1.3rem; font-weight:700; border-radius:100%; background:#FFFF00; line-height:1.3; position: absolute; top:130px; left:-30px; text-align:center;}
.top_shuppan .item .image .fukidasi:after { content:""; display:inline-block; height: calc(60px / 2); width: 80px; clip-path:polygon(0 0, 50% 50%, 0 100%); background:#FFFF00; position:absolute; left:150px;}
.top_shuppan .item .txt { text-align:center; padding:30px 0; }
.top_shuppan .item .txt .ttl { font-size:2.4rem; font-weight:700; line-height:1.3; margin-bottom:40px;}
.top_shuppan .item .txt .desc { font-size:1rem; line-height:2.0;}
.top_shuppan .item .txt .btn_area { margin-top:45px;}


/* about
****************************************************/
.about_bottom_nav { padding:0 0 50px; }
.message_detail .tx1 { font-size:1.1rem; line-height:2.4; }
.message_detail .name_wrap { text-align:right; margin-top:50px;}
.message_detail .name_wrap .sub { font-size:0.9rem; font-weight:700;}
.message_detail .name_wrap .name { font-size:1.8rem; font-weight:500;}
.message_detail .name_wrap .name span { font-size:0.9rem; display:inline-block; margin-right:1rem; font-weight:700;}

.board_member table tr th:first-of-type, .board_member table tr td:first-of-type { text-align:center; }

.access .item {}
.access .item + .item { margin-top:80px; }
.access .item .title { font-size:1.8rem; font-weight:700; margin-bottom:50px; }
.access .item .title i { font-size:2.8rem; margin-right:10px; vertical-align:middle; margin-top:-5px;}
.access .item .item_body { padding-left:100px;}
.access .item .item_body .info .group { display:flex;}
.access .item .item_body .info .group .tx1 { width:100px; font-weight:700; margin-bottom:10px;}
.access .item .item_body .map { margin-top:20px; border:5px solid #eee; height:500px;}
.access .item .item_body .map iframe { width:100%; height:100%;}

.history_list {}
.history_list .item { display:flex; justify-content:space-between; padding-top:15px; position:relative;}
.history_list .item .date { width:300px; display:flex; align-items:baseline; color:#0181D4; position:relative; padding-bottom:60px;}
.history_list .item:after { content:""; display:inline-block; border-left:4px solid #D0E4F0; position:absolute; bottom:-5px; left:50px; height:calc( 100% - 70px);}
.history_list .item:last-of-type:after { display:none;}
.history_list .item:last-of-type .date { padding:0;}
.history_list .item .date .number { font-size:2.6rem; font-weight:700; line-height:1;}
.history_list .item .date .tx { font-size:1.6rem; font-weight:700;}
.history_list .item .date .sub { font-size:1.2rem; font-weight:700;}
.history_list .item .event { width:calc( 100% - 300px - 50px); padding-top:20px; line-height:2.2;}

.info_list {}
.info_list .item {}
.info_list .item .ttl { color:#0181D4; font-size:1.8rem; font-weight:500; margin-bottom:20px;}
.info_list .item .detail { padding-left:40px; }
.info_list .item + .item { margin-top:50px;}

.memberlist {}
.memberlist table tr th:first-of-type, .memberlist table tr td:first-of-type {}


/* 工法紹介
****************************************************/
.construction_list {}
.construction_list .item { display:flex; justify-content:space-between; align-items:center;}
.construction_list .item + .item { margin-top:50px; padding-top:50px; border-top:1px solid #ddd;}
.construction_list .item .image { width:45%; border-radius:10px; overflow:hidden;}
.construction_list .item .tx { width:50%;}
.construction_list .item .tx .name { font-size:2.4rem; font-weight:700; margin-bottom:40px; line-height:1.3;}
.construction_list .item .tx .desc { margin-bottom:40px;}
.construction_list .item .tx .btn_area { text-align:center;}
.construction_list .item .tx .btn_area  .btn { width:400px;}
.remodal-close:before { font-size:45px!important;}
.remodal-close, .remodal-close:before { left:auto!important; right:-20px; color:#fff!important; }
.haichizu { height:700px; display:flex; align-items:center; justify-content:center; background:#eee; }


/* ポンプ船・圧送船一覧
****************************************************/
.shiplist { margin-top:100px; }
.scroll_tx { display:none; }

/* 出版
****************************************************/
.shuppan_detail { display:flex; justify-content:space-between;}
.shuppan_detail .image { width:500px; height:500px; display:flex; justify-content:center; align-items:center; border:5px solid #eee; padding:20px; box-sizing:border-box;}
.shuppan_detail .image img { max-height:100%;}
.shuppan_detail .txt { width:calc( 100% - 500px - 80px );}
.shuppan_detail .txt .name { font-size:2.2rem; font-weight:700; line-height:1.3; margin-bottom:30px;}
.shuppan_detail .txt .desc { color:#999; margin-bottom:20px; font-size:0.9rem;}
.shuppan_detail .txt table { width:100%; margin-bottom:30px;}
.shuppan_detail .txt .price { display:flex; align-items:baseline; }
.shuppan_detail .txt .price .label { border-radius:30px; border:1px solid #333; background:none; color:#333; width:100px;}
.shuppan_detail .txt .price .number { font-size:2.4rem; line-height:1; margin-left:20px; font-weight:600;}
.shuppan_detail .txt .price .tx { font-size:1.4rem; font-weight:700; line-height:1; margin-left:10px;}
.shuppan_detail .txt .price .tx0 { font-weight:700; line-height:1; margin-left:20px;}
.shuppan_detail .txt .btn_area { margin-top:40px;}
.shuppan_detail .txt .tx_indent { font-size:0.9rem;}

.book_detail { width:900px; margin:0 auto; }
.book_detail .item { margin-bottom:80px;  }
.book_detail.aaa .item { margin-bottom:30px;  }
.book_detail.aaa .item .ttl { cursor:pointer;}

.book_detail .item > .ttl { background:#333; padding:20px; color:#fff; font-size:1.2rem; font-weight:700; border-radius:5px; margin-bottom:30px; }
.book_detail .item > .ttl .label { border-radius:30px; background:#fff; color:#333; margin-right:15px; padding:5px 15px; font-size:1rem;}
.book_detail .item .group { padding:0 20px;}
.book_detail .item .group + .group { margin-top:40px;}
.book_detail .item .group > .ttl { padding:10px; padding-top:0; border-bottom:1px solid #ddd; font-size:1.2rem; font-weight:700; display:flex; margin-bottom:20px;}
.book_detail .item .group > .ttl .num { width:40px; text-align:right; padding-right:10px;}
.book_detail .item .group > .ttl .num:after { content:".";}
.book_detail .item .group ol { margin-left:50px;}
.book_detail .item .group ol li { list-style:none; display:flex;}
.book_detail .item .group ol li .num { width:50px;}
.book_detail .hide_cont, .book_detail .hide { display:none;}
.book_detail .more_disp_btn { text-align:center; margin-bottom:50px;}
.book_detail .more_disp_btn .btn, .book_detail .common_btn_area .btn { width:600px;}

.book_detail2 {}
.book_detail2 .wrap { display:flex; flex-wrap:wrap; }
.book_detail2 .wrap .item { width:calc( ( 100% - 80px ) / 3 ); margin-right:40px;}
.book_detail2 .wrap .item:nth-of-type(3n) { margin-right:0;}
.book_detail2 .item { margin-bottom:80px;  }
.book_detail2 .item > .ttl { background:#333; padding:15px; color:#fff; font-size:1.2rem; font-weight:700; line-height:1.4; border-radius:5px; margin-bottom:30px; min-height:95px; box-sizing:border-box; display:flex; justify-content:space-between; align-items:center; }
.book_detail2 .item > .ttl .label { border-radius:30px; background:#fff; color:#333; margin-right:10px; padding:5px 0; font-size:0.9rem; width:60px;}
.book_detail2 .item > .ttl .tx { width:calc( 100% - 60px - 10px ); display:block;}
.book_detail2 .item .group {}
.book_detail2 .item .group + .group { margin-top:30px;}
.book_detail2 .item .group > .ttl { padding:15px 15px 15px 0; padding-top:0; border-bottom:1px solid #ddd; font-size:1.1rem; font-weight:700; line-height:1.4; display:flex; margin-bottom:15px;}
.book_detail2 .item .group > .ttl .num { width:35px; text-align:right; padding-right:10px;}
.book_detail2 .item .group > .ttl .num:after { content:".";}
.book_detail2 .item .group ol {}
.book_detail2 .item .group ol li { list-style:none; position:relative; font-size:0.9rem; padding-left:45px; line-height:1.3; margin-bottom:12px; }
.book_detail2 .item .group ol li .num { position:absolute; left:-5px; width:40px; text-align:right;}
.book_detail2 .hide_cont { display:none;}
.book_detail2 .more_disp_btn { text-align:center; margin-bottom:50px;}
.book_detail2 .more_disp_btn .btn, .book_detail .common_btn_area .btn { width:600px;}

/* contact
****************************************************/
.contact_flow { margin-bottom:80px;}
.contact_flow ul { display:flex; justify-content:center;}
.contact_flow ul li { background:#eee; border-radius:10px; padding:15px; display:flex; justify-content:center; align-items:center; width:180px; text-align:center; font-size:0.9rem; line-height:1.2; position:relative; flex-wrap:wrap;}
.contact_flow ul li + li { margin-left:60px;}
.contact_flow ul li:after { content:""; display:inline-block; border-top:3px solid #CAE9F0; position:absolute; top:30px; right:-50px; width:40px;}
.contact_flow ul li:last-of-type:after { display:none;}
.contact_flow ul li.active { background:#00A3C8; color:#fff;}
.contact_flow ul li .tx1 { width:100%;}

.contact_form {}
.contact_form .btn_area { text-align:center; margin:100px 0 0; }
.contact_form .btn_area .btn + .btn { margin-left:10px;}
.contact_complete { text-align:center; }
.contact_complete .icon_wrap { color:#3ca1e9; margin-bottom:10px;}
.contact_complete .icon_wrap i { font-size:5.0rem;}
.contact_complete .tx1 { font-size:2.2rem; font-weight:700; margin-bottom:30px; color:#00A3C8;}
.contact_complete .tx3 { font-size:1.42rem; font-weight:700; margin-bottom:30px;}
.contact_complete .tx3 i { vertical-align:middle; margin-top:-5px; font-size:2.0rem; margin-right:5px;}
.contact_form th { position:relative; }
.contact_form th .hissu { position:absolute; right:25px; top:23px; }
.contact_form .error_message { color:#cc0000; font-weight:bold; margin-top:5px;}



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

narrow PC 1600以下

*******************************************************************************************/
@media screen and (max-width: 1600px){
  header .logo a { width:300px; }
  header .tx_nav .main_nav > li a { font-size:1rem; }
}

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

narrow PC

*******************************************************************************************/
@media screen and (max-width: 1500px){
  header .tx_nav .main_nav > li { margin-right:20px;}
  .top_intro { overflow:hidden; }
  .top_intro .mainimage .maincatch { width:60vw; right:0; }
  .top_intro .obj02 { left:-45vw; }
  .top_intro .obj03 { right:-40vw; }

}

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

 small display, TABLET

*******************************************************************************************/
@media screen and (max-width: 1300px){

  body { overflow-x:hidden; }

  /* common
  ****************************************************/


  /* layout
  ****************************************************/
  .container { padding:60px 5vw; width:100%; box-sizing:border-box;}
  .breadcrumb .container { padding:20px 5vw; }
  .about_bottom_nav { padding:0 5vw; }



    /* header
    ****************************************************/
    header .logo { width:200px;}
    .hamburger { display: block; cursor: pointer; z-index: 9999; transition: 0.1s; width:40px; height:40px; position:relative;}
    .inner_line { display: block; position: absolute; left:5px; width: 30px; height: 3px; background-color: #222; transition: 0.4s; border-radius: 4px;}
    #line1 { top: 9px;}
    #line2 { top: 19px;}
    #line3 { top: 29px;}
    header.active .hamburger #line1 {  transform: rotate(45deg); top: 20px;}
    header.active .hamburger #line2 { opacity: 0;}
    header.active .hamburger #line3 { transform: rotate(-45deg); top: 20px}

    header .nav_wrap { display: none; position:fixed; width:100%; height:100%; top:0; left:0; background:#fff; overflow:auto;}
    header .nav_wrap .sp_wrap { display: flex;  width: 100%; flex-wrap: wrap;}
    header .tx_nav { margin:0; width:100%; padding:80px 20px; order:2; box-sizing:border-box;}
    header .tx_nav .sub_nav, header .tx_nav .main_nav { text-align: start;}
    header .tx_nav .main_nav li { border-top:1px solid #ddd;}
    header .tx_nav .main_nav li.sp { display:block!important;}
    header .tx_nav .main_nav li.btn_type { padding-top:20px;}
    header .tx_nav .main_nav > li > .wrap > a { display: block; width: 100%; font-size: 1rem; padding: 10px 0 10px 5px; box-sizing: border-box;}
    header .tx_nav .main_nav { display:block;}
    header .tx_nav .main_nav > li { display: block; margin:0; }
    header .tx_nav .main_nav > li > a { display: block; width: 100%; font-size: 1rem; padding: 10px 0 10px 5px; box-sizing: border-box;}

    header .main_nav li.drop:hover > .drop_item { z-index:100; opacity:1; pointer-events:auto;}
    header .drop_item { position:relative; top:auto; left:auto; width:auto; z-index:1000; opacity:1; pointer-events:auto; padding-left:2rem;}
    header .drop_item ul { padding: 0; background:none;}
    header .drop_item li { border-bottom:none; text-align:left;}
    header .drop_item li:last-of-type { border-bottom:0;}
    header .drop_item li a { color:#333!important; padding:15px 0; font-weight:700!important;}
    header .drop_item li a:after { display:none;}
    header .drop_item li a:hover { background:none!important; opacity:1!important;}
    .top_shuppan { margin-top:-120px; }
}

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

  .page_title { height:250px;}
  .page_title .tx01 { font-size:2.2rem;}
  .page_title:after { border-width:90px; width:350px; height:350px; }
  .section_title { margin-bottom:50px;}
  .section_title .tx01 { font-size:2.2rem; }
  .scroll_tx { display:block; font-size:0.8rem; margin-bottom:1rem; }
  .common_btn_area { margin-bottom:80px; }

  .footer_contact { width:auto; padding:50px; margin:40px 5vw -50px; flex-wrap:wrap; }
  .footer_contact > .ttl { width:100%; text-align:center; margin-bottom:50px;}
  .footer_contact .btn { font-size:1.2rem; font-weight:700; width:40%; }
  .footer_contact .tel { width:55%; }

  footer { padding:170px 5vw 50px;}
  footer .footer_main .nav { width:40%; }
  footer .footer_main .nav .ttl { font-size:1.3rem; font-weight:700; margin-bottom:50px; display:flex; align-items:center;}
  footer .footer_main .nav .ttl i { font-size:1.6rem; margin-right:5px;}
  footer .footer_main .nav .nav_wrap { display:block;}
  footer .footer_main .nav .nav_wrap .column + .column { margin-top:40px;}
  footer .footer_main .nav .group_ttl { margin-bottom:20px;}
  footer .footer_main .nav ul { margin-top: 15px; padding-left:30px;}
  footer .footer_main .nav ul li { margin-bottom: 1.0rem;}

  .top_intro .about .tx01 { font-size:2.2rem;}
  .top_intro .about .tx02 { font-size:1.1rem;}

  .image_nav01 { margin-bottom:30px;}
  .image_nav01 .image { width:calc( 100% - 350px); height:auto;}
  .image_nav01 .image a { width:100%; height:300px; display:flex; justify-content:center; align-items:center; border-radius:0 10px 0 10px;}
  .image_nav01 .txt { width:350px; margin-left:0; }
  .image_nav01 .txt .ttl { font-size:2.0rem; margin-bottom:30px;}
  .image_nav01 .txt .desc { font-size:0.9rem;}
  .image_nav01 .txt .btn_area { margin-top:30px;}

  .image_nav_column2 .item { width:calc( ( 100% - 30px ) / 2); height:300px;}
  .image_nav_column2 .item .txt .ttl { font-size:2.0rem; margin-bottom:30px;}
  .image_nav_column2 .item .txt .desc { font-size:0.9rem; line-height:1.6;}
  .image_nav_column2 .item .txt .btn_area { margin-top:30px;}

  .top_shuppan .bg_gray { padding-top:40px;}
  .top_shuppan .item > div { width:calc( ( 100% - 50px ) / 2);}
  .top_shuppan .item .image { height:25vw;}
  .top_shuppan .item .txt .ttl { font-size:2.0rem; margin-bottom:30px;}
  .top_shuppan .item .txt .desc { font-size:0.9rem; line-height:1.6;}
  .top_shuppan .item .txt .btn_area { margin-top:30px;}
  .top_shuppan .item .image .fukidasi { top:50px; }

  .shuppan_detail .image { width:300px; height:300px;}
  .shuppan_detail .txt { width:calc( 100% - 300px - 50px );}
  .shuppan_detail .txt .name { font-size:1.8rem;}

  .construction_list .item { align-items:flex-start;}
  .construction_list .item .tx .name { font-size:1.8rem; margin-bottom:30px;}
  .construction_list .item .tx .desc { font-size:0.9rem; margin-bottom:30px;}
  .construction_list .item .tx .btn_area  .btn { width:100%;}

  .column4_btn { flex-wrap:unset; padding-bottom:15px; margin-right:-5vw; overflow-x:scroll; }
  .column4_btn li { width:auto; margin-bottom:0; margin-right:5px;}
  .column4_btn li .btn { width:max-content; min-width:auto;}

  .table_wrap { overflow-x:scroll; margin-right:-5vw; }
  .table_wrap table { width:max-content;}

}

@media screen and (max-width: 1000px){
  .container { margin-left:0; margin-right:0; }
  .container.narrow { width:auto; }

  .footer_contact { display:block; text-align:center;}
  .footer_contact .tel { width:auto; margin-bottom:40px; }
  .footer_contact .tel .ttl { width:auto; margin-bottom:15px; }
  .footer_contact .tel .tx1 { justify-content:center;}
 

  .history_list .item .event { width:calc( 100% - 300px); }

  ul.iconbtn_nav01 li { width:calc( (100% - 30px) / 3 ); margin-bottom:15px; margin-right:15px;}
  ul.iconbtn_nav01 li .btn { font-size:1rem;}
  ul.iconbtn_nav01 li .btn i { width:100%; font-size:2.4rem; margin-right:0;}

  .book_detail2 .wrap { display:block;}
  .book_detail2 .wrap .item { width:auto; margin-right:0;}
  .book_detail2 .item { margin-bottom:40px;}
  .book_detail2 .item > .ttl { min-height:0;}

}

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

 SP

*******************************************************************************************/
@media screen and (max-width: 800px){

  .sp_nodisp { display:none; }
  .page_title { height:150px; }
  .page_title .tx01 { font-size:1.8rem; }
  .page_title:after { right:-250px; }
  .section_title { margin-bottom:30px;}
  .section_title .tx01 { font-size:1.8rem; line-height:1.4; }
  .btn.large { min-width:300px; }
  .form_desc02 { font-size:0.8rem; }
  .common_btn_area.sp_column2 .btn { min-width:0; width:45%; }

  header .logo a { width:200px; }
  footer .footer_main { display:block; }
  footer .footer_main .txt { width:250px; text-align:center; margin:0 auto 80px; box-sizing:border-box; }
  footer .footer_main .txt .catch { margin:80px auto 0; box-sizing:border-box; width:100%;}
  footer .footer_main .nav { width:100%; }
  footer .footer_main .nav .nav_wrap { display:flex; }
  footer .footer_main .nav .nav_wrap .column + .column { margin-top:0; }
  footer .footer_bottom { flex-wrap:wrap;}
  footer .footer_bottom .copyright { order:2; margin-top:50px; width:100%; text-align:right;}
  footer .footer_bottom .sub_nav { order:1; width:100%; justify-content:right;}
  footer .footer_bottom .sub_nav li + li { margin-left:30px;}
  footer .obj01 { width:300px; height:300px; border-width:80px; left:-200px; top:-15vw;}
  footer .obj02 { width:300px; height:300px; border-width:80px;  right:-200px; bottom:-10vw;}
  .footer_contact { padding:40px 20px; }
  .footer_contact .tel .tx1 .name { padding:6px 8px; font-size:0.7rem; margin-right:5px;}
  .footer_contact .tel .tx1 .num { font-size:1.6rem; }
  .footer_contact .tel .tx1 .num a { color:#111; text-decoration:none; }
  .footer_contact .btn { min-width:0; width:90%; }

  .breadcrumb { overflow-x:scroll; }
  .breadcrumb .container { padding:20px 0 20px 5vw;}
  .breadcrumb ul { width:max-content;}

  .top_intro .mainimage { background-size:cover; background-attachment:unset; }
  .top_intro .mainimage .maincatch { width:400px; top:50%; margin-top:-100px; }
  .top_intro [class^="obj"] { border-width:100px;}
  .top_intro .obj01 { width:400px; height:400px; right:-300px; top:-100px;}
  .top_intro .obj02 { width:300px; height:300px; left:-300px; top:300px;}
  .top_intro .obj03 { width:200px; height:200px; right:-200vw; bottom:-30vw;}
  .top_intro .about .tx01 { font-size:2.0rem; margin-bottom:30px; line-height:1.4;}
  .top_intro .about .tx02 { font-size:1rem; line-height:2.0; text-align:left; margin-bottom:30px; }
  .top_shuppan { margin-top:-120px; }

  .image_nav01 { display:block;}
  .image_nav01 .image { width:80vw; height:200px; margin-bottom:30px;}
  .image_nav01 .image a { height:100%; border-radius:10px 0 10px 0; }
  .image_nav01 .txt { width:100%; margin-left:0; padding-bottom:30px;}
  .image_nav01 .txt .ttl { font-size:1.8rem; margin-bottom:30px;}
  .image_nav01 .txt .btn_area { margin-top:35px;}


  .image_nav_column2 { display:block;}
  .image_nav_column2 .item { width:auto; height:250px;}
  .image_nav_column2 .item + .item { margin-top:30px;}
  .image_nav_column2 .item img { object-fit:cover; height:100%; width:100%;}
  .image_nav_column2 .item .txt .ttl { font-size:1.6rem; margin-bottom:30px;}
  .image_nav_column2 .item .txt .desc { font-size:1rem; line-height:1.4;}
  .image_nav_column2 .item .txt .btn_area { margin-top:25px;}

  .top_shuppan .item { display:flex; flex-wrap:wrap;}
  .top_shuppan .item > div { width:100%;}
  .top_shuppan .item .image { text-align:center; order:1; height:unset;}
  .top_shuppan .item .image img { width:75vw;}
  .top_shuppan .item .image .fukidasi { top:40px; left:5vw;}
  .top_shuppan .item .txt { padding:10px 0 30px; order:2; }
  .top_shuppan .item .txt .ttl { font-size:1.8rem; margin-bottom:20px;}
  .top_shuppan .item .txt .desc { font-size:0.9rem;}
  .top_shuppan .item .txt .btn_area { margin-top:25px;}

  .message_detail .tx1 { font-size: 0.9rem; line-height: 2.0; }

  ul.iconbtn_nav01 li .btn { font-size:0.9rem; padding:10px;}
  ul.iconbtn_nav01 li .btn i { font-size:1.4rem;}

  .access .item + .item { margin-top:50px; }
  .access .item .title { font-size:1.3rem; margin-bottom:30px; }
  .access .item .title i { font-size:2.2rem;}
  .access .item .item_body { padding-left:20px;}
  .access .item .item_body .info .group { justify-content:space-between; margin-bottom:10px;}
  .access .item .item_body .info .group .tx1 { width:80px; margin-bottom:0;}
  .access .item .item_body .info .group .tx2 { width:calc( 100% - 80px); line-height:1.6;}

  .info_list .item .ttl { font-size:1.4rem;}
  .info_list .item .detail { padding-left:20px; }

  .history_list .item { display:block;}
  .history_list .item:after { height: calc(100% - 50px); left:20px; }
  .history_list .item .date { width:auto; padding-bottom:20px; }
  .history_list .item .date .number { font-size:1.8rem;}
  .history_list .item .date .tx { font-size:1rem;}
  .history_list .item .date .sub { font-size:0.9rem;}
  .history_list .item .event { width:calc( 100% - 80px); padding:0 0 20px 60px; font-size:0.9rem; line-height:1.8;}

  .construction_list .item { display:block;}
  .construction_list .item .image { width:100%; height:250px; object-fit:cover; margin-bottom:20px;}
  .construction_list .item .image img { width:100%; height:100%;}
  .construction_list .item .tx { width:100%;}
  .construction_list .item .tx .name { font-size:1.3rem; margin-bottom:20px;}
  .construction_list .item .tx .desc { margin-bottom:20px;}

  .shuppan_detail { display:block;}
  .shuppan_detail .image { width:80vw; height:80vw; margin:0 auto 50px;}
  .shuppan_detail .txt { width:100%;}
  .shuppan_detail .txt .name { font-size:1.8rem;}

  .contact_form table tr,
  .contact_form table th,
  .contact_form table td  { display:block; width:100%; }
  .contact_form table th { border:0; padding-bottom:0; }
  .contact_form table td { padding-left:10vw; box-sizing:border-box;}
  .contact_form table th .hissu { position:unset; }
  .contact_form table th br { display:none; }

  .contact_flow { margin-bottom:80px;}
  .contact_flow ul li { width:80px;}
  .contact_flow ul li + li { margin-left:40px;}
  .contact_flow ul li:after { width:20px; top:50%; right:-30px; margin-top:-2px;}
  .contact_flow ul li .tx1 { display:none;}


}

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

  footer .footer_main .nav,
  footer .footer_bottom .sub_nav
   { display:none;}
  footer .footer_bottom .sub_nav { order:1; width:100%; justify-content:right;}

  ul.iconbtn_nav01 { justify-content:space-between;}
  ul.iconbtn_nav01 li { width:48.5%; margin-bottom:15px; margin-right:0;}
  ul.iconbtn_nav01 li .btn { min-width:0; width:100%;}
  ul.iconbtn_nav01 li .btn i { font-size:1.8rem; margin-right:1rem;}

}