@charset "utf-8";

:root { --main-color: #2d408f; }
/* CSS変数の使い方： .sample { color:var(--main-color); } */

/* init */
*,*::before,*::after{margin:0;padding:0;}
:link,:visited{text-decoration:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
address,caption,cite,code,dfn,em,strong,b,u,s,i,th,var{font-style:normal;font-weight:normal;}
q:before,q:after{content:'';}
a img,:link img,:visited img{border:0;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
input,textarea{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
body *{box-sizing:border-box;}

/* clearfix */
.clearfix:after{content:"";display:block;clear:both;height:0;visibility:hidden;}
.clearfix{min-height:1px;}
* html .clearfix{height:1px;}

/* default */
body{color:#222;font-family:"Noto Sans JP","メイリオ","ヒラギノ角ゴ Pro W3",sans-serif;font-size:20px;line-height:2;}
address{font-style:normal;display:inline;}
strong{font-weight:bold;}
a{color:#222;text-decoration:none;}
a:hover{text-decoration:none;}
a:focus{outline:none;}
img{vertical-align:bottom;}
.container img{max-width:100%;height:auto;}

/* grid-system */
.c-row{ min-height:1px; }
.c-row:after{ clear:both; content:""; display:block; height:0; visibility:hidden;}
.c-row [class*="c-col-"] { margin-bottom:15px; }
.c-row [class*="c-col-"]:last-child { margin-bottom:0; }

@media (min-width: 768px){ 
	.c-row { margin-left:-15px; margin-right:-15px; }
	.c-row * { box-sizing:border-box; }
	.c-row .c-col-1 { width:8.33%; }
	.c-row .c-col-2 { width:16.66%; }
	.c-row .c-col-3 { width:25%; }
	.c-row .c-col-4 { width:33.33%; }
	.c-row .c-col-5 { width:41.66%; }
	.c-row .c-col-6 { width:50%; }
	.c-row .c-col-7 { width:58.33%; }
	.c-row .c-col-8 { width:66.66%; }
	.c-row .c-col-9 { width:75%; }
	.c-row .c-col-10 { width:83.33%; }
	.c-row .c-col-11 { width:91.66%; }
	.c-row .c-col-12 { width:100%; } 
	.c-row [class*="c-col-"] { float: left; padding: 15px; margin-bottom:0; }
	.c-row [class*="c-col-"] img { max-width:100%; height:auto; }
}

/* font-set */
.serif { font-family: "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; }
.al-left { text-align:left; }
.al-center { text-align:center;}
.al-right { text-align:right;}

/* layout */
.wrapper { overflow-x:hidden; }
.container { padding-left:20px; padding-right:20px; position:relative; max-width:100% !important; }
.sp-hidden { display:none; }

@media (min-width: 768px){
	.sp-hidden { display:block; }
	.tb-hidden { display:none; }
}

@media (min-width: 1024px){
	body { min-width:1024px; }
	.container { width:1024px; min-width:1024px; margin:0 auto;}
	.tb-hidden { display:block; }
	.pc-hidden { display:none; }
}

/* header */
.header { height:60px; border-bottom:1px solid #ccc; }
.header .container { display:flex; justify-content:center; align-items:center; height:60px; padding:0; }
.header .logo img { height:auto; }

@media (min-width: 768px){
	.header { height:auto; border-bottom:none; }
	.header .container { display:flex; justify-content:center; align-items:center; height:auto; padding:15px 0; }
    .header .logo img { height:auto; }
}

/* spnav */
.sp-menu{ width:60px; height:60px; position:absolute; right:0; top:-1px; z-index:1000; }
.sp-menu .menu-button { display:block; width:60px; height:60px;  background:url("cmn/imgs/hd_menu_open.png") no-repeat top center; background-size:60px 60px; }
.sp-menu .menu-button.active { background:url("cmn/imgs/hd_menu_close.png"); background-size:60px 60px; }

.sp-nav { padding:0; }
.sp-nav.show-menu { background:#fff; border-bottom:1px solid #ccc; }
.sp-nav div.nav a { color:#222; font-size:16px; line-height:1; border-bottom:1px solid #ccc; padding:20px; padding-left:60px; }

.sp-nav .sp-nav-container { padding:30px 20px; }
.sp-nav .sp-nav-container .sp-gnav { margin-bottom:30px;}
.sp-nav .sp-nav-container .sp-gnav li { list-style:none; position:relative;}
.sp-nav .sp-nav-container .sp-gnav li a { border-bottom: 1px dotted var(--main-color); display:block; padding:15px 0 15px 20px;}
.sp-nav .sp-nav-container .sp-gnav li a:before { content:"\f105"; color:#222; font-family:"FontAwesome"; font-weight:600; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }

.sp-nav-container .sp-subnav { font-size:13px; margin-bottom:30px;}
.sp-nav .sp-nav-container .sp-subnav li { list-style:none; position:relative; padding-left:15px; margin-bottom:15px;}
.sp-nav .sp-nav-container .sp-subnav li a { display: block;}
.sp-nav .sp-nav-container .sp-subnav li a:before { color:#555; font-family:'FontAwesome'; content:"\f105"; display:inline-block; position:absolute; top: 50%; left:0; transform: translateY(-50%);}

@media (min-width:1024px){
	.sp-menu,
	.sp-nav { display:none; }
}

/* global-nav */
.header .global-nav { display:none; }

@media (min-width: 1024px){ 
	.header .global-nav { display:block;}
	.header .global-nav ul li { font-size:16opx; display:inline; margin-right:20px;}
}

/* main-visual */
.mv { line-height:1; }
.slick-slide img { max-width:100% !important; }

/* page-content */
.page-content { font-size:16px; line-height:1.8; padding:30px 0; }
.page-content p { margin-bottom:20px; }
.page-content a { color:#333; }
.page-content ul, 
.page-content ol { margin: 20px 0 20px 30px; padding: 0; }
.page-content ul { list-style: disc outside; }
.page-content ol { list-style: decimal outside; }
.page-content ul li + li,
.page-content ol li + li { margin-top:15px; }
.page-content h1 { color:#222; font-size:28px; font-weight:bold; margin-bottom:20px;}
.page-content h2 { color:#058fcf; font-size:28px; font-weight:bold; text-align:center; line-height:1.6; margin-bottom:20px; position:relative;}
.page-content h3 { color:#222; font-size:20px; font-weight:bold; margin-bottom:15px;}
.page-content h4 { color:#222; font-size:18px; font-weight:bold;}
.page-content h5 { font-weight:bold;}
.page-content * + h2 { margin-top:40px; }
.page-content * + h3 { margin-top:30px; }
.page-content a[target="_blank"]:after { font-size:12px; font-family:"FontAwesome"; font-weight:600; content:"\f08e"; display:inline-block; margin:0 8px 0 5px;}

@media (min-width:768px){
	.page-content { font-size:16px;}
	.page-content p { margin-bottom:25px; }	
	.page-content h2 { font-size:28px;}
	.page-content h3 { font-size:22px;}
}

@media (min-width:1024px){
	.page-content { font-size:18px;}
	.page-content p { line-height:1.8; margin-bottom:30px;}
	.page-content h2 { font-size:46px; margin-bottom:40px;}
	.page-content h3 { font-size:24px;}
	.page-content a { text-decoration:underline; }
	.page-content a:hover { text-decoration:none; }
}

/* テーブル */
.page-content table { color:#058fcf; width:100%; margin-bottom:20px; }
.page-content table th,
.page-content table td { font-size:14px; background:#fff;  border-top:1px solid #add8f3; border-bottom:1px solid #add8f3; display:table-cell; width:auto; padding:10px; }
.page-content table th { background:#d6efff; padding:15px;}

@media (min-width:768px){
	.page-content table th,
	.page-content table td { font-size:16px; padding:10px 15px; }
}

@media (min-width:1024px){
	.page-content table th,
	.page-content table td { font-size:17px; padding:10px 15px;}
}

/* レスポンシブ用テーブル */
@media (max-width:600px){
	.page-content .responsive table { border-top:1px solid #add8f3; border-collapse:collapse; width:100%; margin-bottom:20px; }
	.page-content .responsive table th,
	.page-content .responsive table td { font-size:15px; border:0; border-bottom:1px solid #add8f3; padding:15px; display:block; width:100%; }
	.page-content .responsive table th { font-weight:bold; border:0; border-bottom:0; padding:7px; }
}

@media (min-width:1024px){
	.page-content .responsive table th { padding:15px;}
}

/* page-top */
.page-top { text-align:right; margin:10px;}

/* footer > site-footer */
.footer .site-footer { color:#fff; text-align:center; background:var(--main-color); padding:30px 15px;}
.footer .site-footer .site-name { font-size:18px; font-weight:600;}
.footer .site-footer address { font-size:16px;}

.footer .footer-nav { font-size:13px; margin-bottom:30px;}
.footer .footer-nav li { list-style:none; position:relative; padding-left:15px; margin-bottom:10px;}
.footer .footer-nav li a:before { color:#555; font-family:'FontAwesome'; content:"\f105"; display:inline-block; position:absolute; top: 50%; left:0; transform: translateY(-50%);}

.footer .copyright { font-size:14px; margin-top:40px; }

@media (min-width: 1024px){ 
	.footer .footer-nav { font-size:14px; text-align:center; margin:0 auto 30px;}
	.footer .footer-nav li { display:inline; margin-right:20px; line-height:2;}
}

/* 共通 */
.page-content .text-white { color: #fff;}
.page-content .remove-icon a:after { content:none;}
.page-content .img { margin-bottom:15px;}

/* スペース */
.page-content div.space-xs { height:20px !important; }
.page-content div.space-sm { height:30px !important; }
.page-content div.space-md { height:60px !important; }
.page-content div.space-lg { height:100px !important; }

@media (min-width: 768px){ 
	.page-content div.space-xs { height:20px !important; }
	.page-content div.space-sm { height:40px !important; }
	.page-content div.space-md { height:80px !important; }
	.page-content div.space-lg { height:100px !important; }
}

@media (min-width: 1024px){ 
	.page-content div.space-lg { height:120px !important; }
}

/* トップページ */
.page-content .slide-text { color:#014487;}
.page-content .point-area { margin-bottom:70px;}
.page-content .point-area picture { display: block; background: #fff; border:2px solid #01b7f9; border-radius:15px; margin-bottom:20px;}

.page-content .suidosui-logo { margin:30px 0 40px;}
.page-content .suidosui-logo img { max-width:275px;}

@media (min-width: 425px){
    .page-content .slide-text { display:none;}
}

@media (min-width: 768px){
    .page-content .suidosui-logo { margin:30px 0 70px;}
    .page-content h2 br.pc-hidden { display:none;}
}

@media (min-width: 1024px){
    .page-content .suidosui-logo { margin:30px 0 70px;}
    .page-content .suidosui-logo img { max-width:400px;}
}

.page-content .overview { margin-bottom:70px;}
.page-content .overview .img img { border-radius:10px;}

.page-content .overview p.text-white { font-size:16px; text-align:center;}

@media (min-width: 768px){
    .page-content .overview p.text-white { font-size:18px; text-align:left; margin-top:20px;}
}
@media (min-width: 1024px){
    .page-content .overview p.text-white { font-size:20px; text-align:left; margin-top:50px;}
}

.page-content .distribution-list { background:#fff; border-radius: 15px; padding:40px 20px; margin:40px 0; }

@media (min-width: 768px){
    .page-content .distribution-list { padding:60px 60px; margin:40px 0 100px; }
}

.page-content .has-bk-water { background: url("cmn/imgs/water_bk.jpg") no-repeat; background-position: center 50px; background-size:cover; padding-bottom:60px; margin-bottom: 40px;}

@media (min-width: 768px){
    .page-content .has-bk-water { padding-bottom:120px; margin-bottom: 60px;}
}

.page-content .banner-list { list-style: none; padding: 0; margin:0;}
.page-content .banner-list li { font-size:20px; background-color:#63bddd; position: relative;}
.page-content .banner-list a { color:#fff; text-decoration: none; font-weight: bold; display: block; margin:0 0 10px; padding:20px 20px;}
.page-content .banner-list li::after { color:#fff; font-family:"FontAwesome"; font-weight: 900; content: "\f138"; position: absolute; right:20px; top: 50%; transform: translateY(-50%);}

.page-content .slash { display: flex; justify-content: center; align-items: center; position: relative;}
.page-content .slash::before,
.page-content .slash::after { content: ""; width: 50px; height: 2px; background-color:#058fcf; margin: 0px 4px 4px;}
.page-content .slash::before { transform: rotate(55deg);}
.page-content .slash::after { transform: rotate(-55deg);}
 
@media (min-width: 768px){ 
    .page-content .banner-list a { margin:30px 0; padding:30px;}
    .page-content .banner-list li::after { right:30px;}
}

/* 下階層 */
.main .page-title { color:#fff; text-align: center; padding:80px 0 90px;}
.main .page-title h1 { font-size:30px; font-weight:600;}
.main .page-title .sub-text { font-size:14px;}

.main .p-history .page-title { background: url("cmn/imgs/bk_history_sp.png") no-repeat bottom center; background-size:cover;}
.main .p-tanne .page-title { background: url("cmn/imgs/bk_tanne_sp.png") no-repeat bottom center; background-size:cover;}

@media (min-width: 768px){
    .main .page-title { padding:90px 0 120px;}

    .main .page-title h1 { font-size:40px;}
    .main .page-title .sub-text { font-size:16px;}
    .main .p-history .page-title { background: url("cmn/imgs/bk_history_pc.png") no-repeat bottom center; background-size:cover;}
    .main .p-tanne .page-title { background: url("cmn/imgs/bk_tanne_pc.png") no-repeat bottom center; background-size:cover;}
}

/* 動画埋め込みレスポンシブ対応 */
.page-content .video  { width: 100%; aspect-ratio: 16 / 9; margin:30px 0;}
.page-content .video iframe { width: 100%; height: 100%; margin:0;}