:root {
 --logo1:#71c7dc; /* ロゴ色1 */
 --logo2:#036EB7; /* ロゴ色2 */
 --logo3:#084369; /* ロゴ色3  */
  --baseBk:#231815; /* 基本BK  */
  --light:#eefcff; /* 背景ブルー  */
  --medium:#7ad2e8; /* 背景ブルー2  */
}

body {
font-family: YakuHanJP, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, 'MS PGothic', 'ＭＳ Ｐゴシック', Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.5em;
position: relative;
 color: var(--baseBk);
 background: url("img/body_bg.jpg");
 background-repeat: repeat-x;
}

li{
list-style-type: none;
}
img{
width: 100%;
height: auto;
vertical-align: top;
}
a{
transition: 0.3s;
color:#231815;
}
a:hover{
opacity: 0.8;
color:#71C7DC;
}
h1,h2,h3,h4,h5,h6{
font-feature-settings: "palt";
font-weight: normal;
line-height:  1.3em;
}
br.sponly{display: none;}
.clear{clear: both;}





div, p, span, input, textarea,header,footer,td,th {
box-sizing: border-box;
}


/*/////////HAMBURGER///////////*/

#hamburger {
display: none;
position: absolute;
    width: 38px;
    height: 19px;
    border: none;
    right: 20px;
    top: 30px;
    cursor: pointer;
    z-index: 200;
}
.burger-btn{
display: block;
height:19px;
position: absolute;
border: none;
cursor: pointer;
}
.burger-btn .bar{
width: 38px;
height: 1px;
display: block;
position: absolute;
left: 0;
background-color: #6e6e6e;
}
.burger-btn .bar_top{
top:0;
transition: 0.3s;
}
.burger-btn .bar_mid{
display: block;
top: 46%;
transition: 0.2s;
}
.burger-btn .bar_bottom{
bottom: 0;
transition: 0.3s;
}

/* MODAL open時 */
#hamburger.menuopen{
width: 38px;
height: 38px;
position: absolute;
right: 0;
}
#hamburger.menuopen .bar{
width: 38px;
height: 1px;  
display: block;
position: absolute;
}    
#hamburger.menuopen .bar_top{
top: 0;
transform: translate(-40%,10px) rotate(45deg)
}
#hamburger.menuopen .bar_mid{
opacity: 0;
left: -40px;
}
#hamburger.menuopen .bar_bottom{
bottom: 0;
transform: translate(-40%,-9px) rotate(-45deg);
}


/*/////////MODAL///////////*/

#modalmenu{
display: none;
z-index: 400;
width: 100%;
min-height: 100vh;
background: #fff;
position: absolute;
top: 0;
padding:0 0 0 0;
background: #fff;
background: url("../img/body_bg_modal.jpg");
background-repeat: repeat-x;
}

.modalmenu_top{
position: relative;
height: 80px;
}

#hamburger_cl{
position: absolute;
width: 38px;
height: 19px;
border: none;
right: 0;
top: 30px;
cursor: pointer;
}
#hamburger_cl .bar{
width: 38px;
height: 1px;
display: block;
position: absolute;
}    
#hamburger_cl .bar_top{
top: 0;
transform: translate(-40%,10px) rotate(45deg)
}
#hamburger_cl .bar_bottom{
bottom: 0;
transform: translate(-40%,-9px) rotate(-45deg);
}

.modal_contents{
padding: 30px 0 30px;
text-align: center;
width: 10em;
margin: auto;
}
.modal_contents li{
font-size: 120%;
line-height: 3.5;
border-bottom:  solid 1px var(--logo1);
}
.modal_contents a{
text-decoration: none;
}
.modal_contents a:hover{
text-decoration: none;
opacity: 0.7;
}


/*/////////HEADER///////////*/

#page_header{
width: 100%;
background: #f6fdff;
position: relative;
height: 80px;
}
.header_logo{
position: absolute;
width: 90px;
top: 15px;
left: 20px;
}
.header_logo img{
width: 100%;
}
.header_menu{
text-align: center;
margin: auto;
padding: 28px 0 0;
}
.header_menu li{
display: inline-block;
margin: 0 1em;
font-weight: bold;
}
.header_menu li a{
text-decoration: none;
color: #005e7d;
}
.header_menu li a:hover{
text-decoration: none;
opacity: 1;
color: #003d65;
}


/*/////////FOOTER///////////*/

.footer_cta{
background: var(--logo1);
text-align: center;
padding: 60px 0 30px;
}
.footer_cta h3{
text-align: center;
font-size: 26px;
padding-bottom: 1.5em;
font-weight: bold;
}
.footer_cta h4{
text-align: center;
font-size:20px;
padding-bottom: 1.0em;
font-weight: bold;
}

footer{
background: #f5fdff;
padding: 30px 0 30px;
}
.footer_menu ul{
text-align: center;
display: flex;
justify-content: center;
}
.footer_menu li{
margin: 0 1em;
}
.footer_menu li a{
text-decoration: none;
}
.footer_logo{
width: 110px;
margin:  0 auto 10px;
}
.footer_logo img{/*
filter: drop-shadow(0px 0px 3px #fff);*/
}
.copyright{
padding: 25px 0 0;
color: #005e7d;
text-align: center;
}



@media screen and (max-width:600px){
footer h3{ 
font-size: 5vw;
}
footer h4{ 
font-size: 4vw;
}
}
@media screen and (max-width:500px){
.footer_menu ul{
display: block;
}
.footer_menu li{
display: block;
margin-right: 0;
margin: 0 auto;
line-height: 2.5;
width: 10em;
border-bottom: solid 1px #fff;
}
}




/*///////// CONTENTS///////////*/

section{
padding: 80px 0 50px;
}

h2{
text-align: center;
color: var(--logo3);
font-size: 32px;
padding: 0 0 60px;
}

section.bg{
background: var(--logo1);
}
section.bg2{
background: var(--medium);
}

@media screen and (max-width:1500px){
section{
padding: 5vw 0 4vw;
}
h2 {
padding: 0 0 4vw;
}
}
@media screen and (max-width:860px){
section{
padding: 8vw 0 4vw;
}
h2 {
font-size: 24px;
padding: 0 0 7vw;
}
}


/*/////////MAINVISUAL///////////*/

br.hero_catch{
display: none;
}
section.hero{
width: 95%;
max-width: 1500px;
margin: auto;
padding: 0  0;
}
#mainvisual{
width: 100%;
position: relative;
aspect-ratio: 16 / 7;
overflow: hidden;
border-radius: 20px;
  display: grid;
  place-items: center; /* ←中央配置（天地左右センター） */
}
#mainvisual img.mainvisual{
  grid-area: 1 / 1;          /* ← 背景レイヤー位置 */
  width: 100%;
  height: 100%;
  object-fit: cover;         /* ← 背景的に扱うため必須 */
  z-index: 1;
}
.main_text {
  grid-area: 1 / 1;
  z-index: 2;
  text-align: center;
  align-self: start;     /* ← 上側に寄せる */
  padding-top: 16%;      /* ← 微調整値は自由 */
}
#mainvisual h1{
width: 200px;
margin: auto;
text-align: center;
margin-bottom: 15px; 
}
#mainvisual h1 img{
filter: drop-shadow(0px 0px 15px #fff);
}
#mainvisual h2{ 
color: #fff;
font-weight: bold;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}

	br.sponly{
	display: none;
	}


@media screen and (max-width:1580px){
.main_text {
  padding-top: 14%;
}
}
@media screen and (max-width:960px){
br.hero_catch{
display: block;
}
.main_text {
  padding-top: 9%;
}
#mainvisual h2{ 
font-size: 28px;
}
}
@media screen and (max-width:840px){
.header_menu{
text-align: right;
}
.header_menu li{
margin: 0 2em 0 0;
}
}
@media screen and (max-width:700px){
#mainvisual h1{
width: 150px;
}
}
@media screen and (max-width:600px){
.header_menu{
display: none;
}
#mainvisual h1{
display: none;
}
#hamburger {
display: block;
}
.main_text {
  padding-top: 14%;
}
#mainvisual h2{ 
font-size: 5vw;
}
}

@media screen and (max-width:500px){
#mainvisual{
aspect-ratio: 12 / 7;
}
.main_text {
grid-area: 1 / 1;
z-index: 2;
text-align: center;
align-self:center;
padding-top: 0;      /* ← 微調整値は自由 */
}
#mainvisual h2 {
font-size: 6.25vw;
padding: 0;
}
br.sponly{
display: block;
}
}


/*///////// NEWS TOP///////////*/

.news_list_top{
width: 90%;
max-width: 1200px;
margin: auto;
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.news_list_top .news_list{
position: relative;
margin: 0 10px 50px;
background: var(--light);
border-radius: 8px;
padding:15px 20px 20px;
color: var(--logo3);
font-size: 16px;
}
.news_list_thumb{
aspect-ratio: 16 / 9;
overflow: hidden;
position: relative;
border-radius: 8px;
margin-bottom: 15px;
}
.news_list_thumb img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.news_list_thumb a:hover{
opacity: 0.7;
}
.news_list_text{
margin: 0 10px;
}
.news_list h4{
font-size: 120%;
line-height: 1.7;
}
.news_list h4 a{
color: var(--logo3);
text-decoration: none;
}
.news_list_text p.list_date{
font-size: 90%;
line-height: 1.5;
padding-bottom: 1.5em;
}
.news_list_excerpt p{
font-size: 90%;
line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  overflow: hidden;
}
.news_list_link_wrap{
margin-top: 15px;
width: 100%;
text-align: right;
}
.news_list_link{
display: inline-block;
border-radius: 4px;
font-size: 80%;
}
.news_list_link a{
text-decoration: none;
border-radius: 4px;
background: var(--logo3);
padding: 0 1.5em;
display: block;
color: #fff;
line-height: 1.8;
}
.news_list_link a:hover{
background: var(--logo1);
opacity: 1;
}


/*///////// NEWS LIST///////////*/

.news_list_wrap{
width: 90%;
max-width: 1200px;
margin: auto;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.news_list_wrap .news_list{
width: 30%;
position: relative;
margin: 0 0 50px;
background: var(--light);
border-radius: 8px;
padding:15px 20px 20px;
color: var(--logo3);
font-size: 16px;
}



@media screen and (max-width:860px){
.news_list_top{
display: block;
}
.news_list_top .news_list{
width: 100%;
max-width: 500px;
margin: 0 auto 25px;
}
.news_list_wrap .news_list{
width: 48%;
}
.news_list_thumb {
margin-bottom: 10px;
}
.news_list_text p.list_date {
padding-bottom: 1.0em;
}
.news_list_excerpt p{
-webkit-line-clamp: 1; 
}
.news_list_link_wrap{
margin-top: 10px;
}
}

@media screen and (max-width:500px){
.news_list_wrap .news_list{
width: 100%;
}
}


/*///////// SERVICE///////////*/

section#service h3{
color: #fff;
text-align: center;
font-size: 24px;
}
section#service h4{
text-align: center;
color: var(--logo3);
font-size: 24px;
padding: 0 0 10px;
font-weight: 600;
}
.service_wrap{
width: 90%;
max-width: 1200px;
margin:50px auto;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.service_txt{
text-align: left;
line-height: 1.7;
width:52%;
color: var(--logo3);
}
.service_txt p{
padding-bottom: 1.5em;
font-weight: 400;
font-size: 105%;
font-weight: bold;
line-height: 1.8;
}
.service_pic{
/*
width: 400px;
aspect-ratio: 4 / 3;
overflow: hidden;
position: relative;
border-radius: 10px;
display: grid;
*/
    padding-left: 5%;
    width: 40%;
}
.service_pic img{
/*
position: absolute;
width: 100%;
height: 100%;*/
object-fit: cover;
}
.service_pic img.service_sp{
display: none;
}
@media screen and (max-width:1140px){
.service_pic{
width: 40%;
}

}

@media screen and (max-width:860px){
.service_wrap{
flex-wrap: wrap;
}
.service_txt{
width:100%;
}
.service_pic{
width: 100%;
max-width: 800px;
margin: 0 auto 50px;
padding-left: 0;
}
.service_pic img.service_pc{
display: none;
}
.service_pic img.service_sp{
display: block;
}
}



/*///////// COMPANY///////////*/

.company_wrap{
width: 90%;
max-width: 900px;
margin: auto;
margin-bottom: 40px;
}
.company_wrap table{
width: 100%;
border-collapse: collapse;
}
.company_wrap table td,
.company_wrap table th{
border: solid 3px #fff;
}
.company_wrap table th{
background: var(--logo1);
color: var(--logo3);
width: 10em;
text-align: center;
padding: 1em 0;
}
.company_wrap table td{
background: var(--light);
padding: 1em  1em 1em 2em;
}
.company_map{
width: 90%;
max-width: 900px;
margin: auto;
}
h3.history{
font-size: 150%;
color: var(--logo3);
padding: 50px 0 0.5em;
}

@media screen and (max-width:500px){
.company_wrap table td,
.company_wrap table th{
display: block;
width: 100%;
border: none;
text-align: left;
padding: 1em  1.5em ;
}
.company_wrap table td{
border-bottom: solid 6px #fff;
}
}




.linkbtn{
text-align: center;
width: 100%;
max-width: 300px;
border-radius: 100px;
margin: 20px auto;
}
.linkbtn a{
display: block;
border-radius: 100px;
background: var(--logo3);
color: #fff;
text-decoration: none;
line-height: 2.4;
}
.linkbtn a:hover{
background: var(--logo1);
opacity: 1;
}

.linkbtn_contact{
text-align: center;
width: 100%;
max-width: 300px;
border-radius: 100px;
margin: 20px auto;
}
.linkbtn_contact a{
display: block;
border-radius: 100px;
background: var(--logo3);
color: #fff;
text-decoration: none;
line-height: 2.4;
}
.linkbtn_contact a:hover{
background: #fff;
color: var(--logo1);
opacity: 1;
}


/*///////SINGLE////////////*/

article{
width: 90%;
max-width: 1100px;
margin: auto;
padding-top: 40px;
}
article h1{
font-size: 30px;
}
#single_mainvisual{
width: 100%;
position: relative;
aspect-ratio: 16 / 7;
overflow: hidden;
border-radius: 20px;
  display: grid;
  place-items: center; /* ←中央配置（天地左右センター） */
  margin-bottom: 50px;
}
#single_mainvisual img{
position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.newsingle_date{
color: var(--logo1);
padding-bottom: 2em;
}

@media screen and (max-width:500px){
article h1{
font-size: 24px;
}
}


/*///////// CONTACT///////////*/
.section-contact{
width: 90%;
max-width: 900px;
margin: auto;
}
.section-contact table{
width: 100%;
margin: 20px 0;
}
.section-contact td{
width: 65%;
padding: 1.5em 1.5em;
border-bottom: solid 1px rgba(0,0,0,0.2);
background: #fafeff;
}
.section-contact td textarea,
.section-contact td input{
width: 100%;
font-size: 100%;
padding: 0.25em;
}
.section-contact td .zip input{
width: 8em;
}
.section-contact td div{
margin-bottom: 10px;
}
.section-contact td.bg{
width: 35%;
font-size: 105%;
background: #a1dfee;
color:var(--logo3);
font-weight: bold;
position: relative;
}
.required {
font-size:90%;
display: inline-block;
padding: 2px;
color: #fff;
background: #ce2324;
border: 1px solid red;
border-radius: 4px;
line-height: 1;
position: absolute;
right: 1em;
font-weight: normal;
}
p.submitbtn{
display: block;
width: 100%;
max-width: 300px;
margin: 30px auto 0;
}
input[type=submit]{
text-align: center;
width: 100%;
border-radius: 100px;
background: var(--logo3);
color: #fff;
text-decoration: none;
line-height: 2.4;
cursor: pointer;
}
input[type=submit]:disabled{
opacity: 0.3;
}

@media screen and (max-width:640px){
.section-contact td{
display: block;
width: 100%;
border-bottom: solid 10px #fff;
padding: 1.5em 1em;
}
.section-contact td.bg{
width: 100%;
border-bottom: none;
padding: 0.5em 1em;
}
}


/*///////// 404///////////*/

h1.error{
padding: 80px 0;
}
p.error{
padding: 0 0 150px 0;
}


/* ダークモード設定時のスタイルを上書きして無効化 */
@media (prefers-color-scheme: dark) {
  body {
font-family: YakuHanJP, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, メイリオ, 'MS PGothic', 'ＭＳ Ｐゴシック', Helvetica, Arial, sans-serif;
  }
}