/*
Theme Name:news_clk
Theme URI: http://example.com/my-custom-theme/
Description: This is a custom theme
Author:tks
Author URI: http://example.com
Version: 1.0
*/
@charset "utf-8";
@font-face {
font-family: "irohamaru";
src: url("asset/font/irohamaru-Light.ttf") format("truetype");
}
/*--------------------------------------------------------
	reset 
---------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; }
ul,ol { list-style-type: none; }
em,strong,th,address { font-style: normal; font-weight: normal; text-align: left; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
img,
object,
embed { border: 0; vertical-align: top; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a{ outline: none; text-decoration: none; color: #000;}
a:hover{ color: #666;}
hr { border: none;}
table { border-collapse: collapse; border-spacing: 0; font-size: 100%; }
li { list-style-type: none; }
strong { font-weight: bold; }
/*-------------------------------------------------
	base
--------------------------------------------------*/
body {position: relative; background: #fff; color: #000; font-family: "Noto Sans JP", sans-serif;font-weight: normal; font-size: 18px; line-height: 1.6; -webkit-text-size-adjust: 100%;overflow-x: hidden }
.wrapper{ position: relative; overflow: hidden;}
/*-------------------------------------------------
	txt
--------------------------------------------------*/
.txt_l { font-size: 30px; letter-spacing: 4px; line-height: 1.3; font-weight: 500;}
.txt_m { font-size: 19px;letter-spacing: 2.1px; line-height: 1.65; font-weight: 500;}
.txt_s { font-size: 18px; letter-spacing: 2px; line-height: 1.5; font-weight: 500;}
header .link_box a{ font-size: 18.55px; font-weight: 100; letter-spacing: 2px; line-height: 2.2;}
.txt_lb { font-size: 30px; letter-spacing: 4px; line-height: 1.3; font-weight: 500;}
@media screen and (max-width: 1600px) {
.txt_s { font-size: 16px; letter-spacing: 1px; line-height: 1;}
}/*END*/
@media screen and (max-width: 1450px) {
.txt_s { font-size: 16px; letter-spacing: 1px; line-height: 1;}
}/*END*/
@media screen and (max-width: 1400px) {
.txt_l { font-size: 28px; letter-spacing: 4px; line-height: 1.1;}
.txt_m { font-size: 18px;letter-spacing: 1.7px; line-height: 1.6;}
.txt_lb { font-size: 28px; }
}/*END*/

@media screen and (max-width: 1250px) {
header .link_box a{ font-size: 14px; line-height: 2.5;}
}/*END*/
@media screen and (max-width: 1130px) {
.txt_s { font-size: 15px; letter-spacing: 1.2px; line-height: 1;}
.txt_m { font-size: 16px;letter-spacing: 1.7px; line-height: 1.6;}
}/*END*/
@media screen and (max-width: 1024px) {
.txt_l { font-size: 26px; letter-spacing: 4px;}
.txt_m { font-size: 18px;letter-spacing: 1.7px;}
.txt_s { font-size: 16px; letter-spacing: 1.7px;}
}/*END*/
@media screen and (max-width: 600px) {
.txt_lb { font-size: 24px; }
}/*END*/
@media screen and (max-width: 460px) {
.txt_l { font-size: 22px; letter-spacing: 2px;}
}/*END*/
/*-------------------------------------------------
	header
--------------------------------------------------*/
header{z-index: 100; width: 100%; height: 100px;display: flex; align-items: center;position: relative; position: fixed; background: #fff;}
header .header_wrap{ display: flex; align-items: center;}
header .header_wrap .logo{ left: 21px; width: 400px;position: absolute; }
header .header_wrap .mene_box{ position: absolute; right: 19px;display: flex;align-items: center;}
header ul {display: flex; }
header ul li{ margin-right: 28px;}
header .link_box { width: 210px; height: 48px; background: #1e3b8d;  border-radius: 15px; display: flex; align-items: center;}
header .link_box:hover { opacity: 0.9;}
header .link_box a{ color: #fff;  display: flex; align-items: center;}
header .link_box a img{ width: 23px; height: 25px; margin-left: 19px;}
header .link_box a p{ margin-left: 15px; font-weight: 400;}
header .header_wrap .header_1350{ display: none;}
/*-------- hum --------*/
.openbtn{margin-right: 31px;cursor: pointer;width: 37px;height:13px;z-index: 9999;display: inline-block;position: relative;}
/*×に変化*/	
.openbtn span{display: inline-block;transition: all .4s;position: absolute;left: -1px;height: 1px;width: 37px;background: #000;background-blend-mode: difference;}
.openbtn span:nth-of-type(2) {top:10px;width: 26px;}
.openbtn.active {height:30px; margin-top: -7px;}
.openbtn.active span{background: #000;z-index: 9999;}
.openbtn.active span:nth-of-type(1) {top: 13px;left: -1px;transform: translateY(6px) rotate(-45deg);}
.openbtn.active span:nth-of-type(2) {top: 25px;left: -1px;transform: translateY(-6px) rotate(45deg);width: 37px;}
@media screen and (max-width: 1600px) {
header ul li{ margin-right: 20px;}
header .link_box { width: 190px; height: 48px;}
}/*END*/
@media screen and (max-width: 1440px) {
header ul li{ margin-right: 15px;}
header .header_wrap .logo{ left: 21px; width: 350px;}
header .link_box { width: 180px; height: 48px;}
header .link_box a img{ width: 20px; height: 22px; margin-left: 15px;}
header .link_box a p{ margin-left: 12px;}
}/*END*/
@media screen and (max-width: 1350px) {
header .header_wrap .header_pc{ display: none;}
header .header_wrap .header_1350{ display: block;}
}/*END*/
@media screen and (max-width: 1024px) {
header{ height: 80px;}
header .header_wrap .logo{  width: 330px;}
header .header_wrap .mene_box{ right: 5px;}
}/*END*/
@media screen and (max-width: 640px) {
header{ height: 80px;}
header .header_wrap .logo{ left: 15px; width: 300px;}
header .header_wrap .mene_box{ right: -10px;}
}/*END*/
@media screen and (max-width: 420px) {
header{ height: 80px;}
header .header_wrap .logo{ left: 15px; width: 280px;}
header .header_wrap .mene_box{ right: -12px;}
}/*END*/
@media screen and (max-width: 380px) {
header{ height: 80px;}
header .header_wrap .logo{ left: 13px; width: 250px;}
header .header_wrap .mene_box{ right: -12px;}
}/*END*/
@media screen and (max-width: 350px) {
header{ height: 80px;}
header .header_wrap .logo{ left: 10px; width: 230px;}
header .header_wrap .mene_box{ right: -12px;}
}/*END*/
.sp{display: none; }
@media screen and (max-width: 1220px) {
.pc{display: none; }
.sp{display: block; }
header .link_box { display: none;}
}/*END*/
/*-------------------------------------------------
	nav
--------------------------------------------------*/
#g-nav a{text-decoration: none;}
#g-nav a:hover{ opacity: 1; }
#g-nav{position:fixed;z-index: 999;top:-300%;left:0;width:100%;height: 100vh;/*ナビの高さ*/background-color: #fff; transition: all 0.6s;}
/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{top: 0;}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive .g_nav_inner{/*ナビの数が増えた場合縦スクロール*/ position: fixed;z-index: 999; width: 100%;height: 100vh;/*表示する高さ*/overflow-y: hidden; -webkit-overflow-scrolling: touch;overflow-x: hidden;}
.g_nav_inner{ width: 100%; height: 100vh;}
.g_nav_inner .inner p, 
.g_nav_inner .inner a{color: #000; font-size: 24px; }
.g_nav_inner .inner ul{ display: block;}
.g_nav_inner .inner li{ margin-top: 30px;}
.g_nav_inner .inner li:nth-child(1){ margin-top: 0px;}
header .link_box_sp { width: 230px; height: 48px; background: #1e3b8d;  border-radius: 15px; display: flex; align-items: center;}
header .link_box_sp:hover { opacity: 0.9;}
header .link_box_sp a{ color: #fff;  display: flex; align-items: center;}
header .link_box_sp a img{ width: 23px; height: 25px; margin-left: 19px;}
header .link_box_sp a p{ margin-left: 15px;font-weight: 400;}
.g_nav_inner .link_box_sp p{color: #fff; font-size: 20px; }
.g_nav_inner .nav_wrap{display: flex; align-items: center; justify-content: center; height: 100vh; position: relative; overflow-y: hidden;}
.g_nav_inner .inner{ width: 100%; max-width: 1600px; z-index: 999;display: flex; align-items: center; justify-content: center;margin: 0 auto;}
/*ここについてなぜ必要か必ずチャック！！！！！！
@media (max-width: 400px) {
#g-nav,
#g-nav.panelactive .g_nav_inner,
.g_nav_inner,
.g_nav_inner .nav_wrap,
#main .inner{ height: -webkit-fill-available; }
}/*END*/ 
@media screen and (max-width: 500px) {
.g_nav_inner .inner a{ font-size: 20px; }
.g_nav_inner .inner li{ margin-top: 20px;}
}
.nav_bar { margin-right: 10px;}
/*-------------------------------------------------
	banner
--------------------------------------------------*/
#banner { margin-top: 100px; width: 100%; height: 300px; overflow: hidden; position: relative; background: #777;}
#banner .banner_wrap img{ position: absolute; width: 100%; }
#banner .banner_wrap h2{ position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; white-space: nowrap;}
@media screen and (max-width: 1300px) {
#banner { height: 23vw;}
}
@media screen and (max-width: 1024px) {
#banner { margin-top: 80px; height:29vw;}
}
@media screen and (max-width: 800px) {
#banner img{ height: 35vw;}
}


.banner_pc{ display: block;}
.banner_sp{ display: none;}
@media screen and (max-width: 1024px) {
.banner_pc{ display: none;}
.banner_sp{ display: block;}
}
/*-------------------------------------------------
	footer
--------------------------------------------------*/
footer{ width: 100%; height: 350px; background: #f2f2f2;}
footer .logo{ width: 400px; height: auto; margin: 0 auto; padding-top: 58px;}
footer .mene_box{ margin: 0 auto; padding-top: 45px; }
footer .mene_box ul{ display: flex; align-items: center; justify-content: center; margin: 0 auto; }
footer ul li{ margin-right: 28px;}
footer ul li:nth-last-child(1) { margin-right: 0px;}
footer .link_box { width: 200px; height: 48px; background: #1e3b8d;  border-radius: 15px; display: flex; align-items: center; margin: 55px auto 0;}
footer .link_box:hover { opacity: 0.9;}
footer .link_box a{ color: #fff;  display: flex; align-items: center;}
footer .link_box a img{ width: 23px; height: 25px; margin-left: 19px;}
footer .link_box a p{ margin-left: 15px;font-weight: 400;}
@media screen and (max-width: 1100px) {
footer ul li{ margin-right: 18px;}
footer ul li:nth-last-child(1) { margin-right: 0px;}
}/*END*/
@media screen and (max-width: 850px) {
footer{ height: 590px;}
footer .mene_box{ margin: 0 auto; padding-top: 35px;display: flex; align-items: center; justify-content: center;}
footer .mene_box ul{ display: block;}
footer .mene_box ul li{ margin-top: 20px;}
}/*END*/
@media screen and (max-width: 440px) {
footer .logo{ width: 79vw; }
}/*END*/
/*-------------------------------------------------
txt
--------------------------------------------------*/
.txt_date { font-size: 14px; letter-spacing: 2px; line-height: 1; font-weight: 500;}
.txt_title { font-size: 14px; letter-spacing: 2px; line-height: 1.4; font-weight: 500;}
@media screen and (max-width: 640px) {
.txt_title { font-size: 15px; letter-spacing: 2px; line-height: 1.5; font-weight: 500;}
}/*END*/
/*-------------------------------------------------
news_list
--------------------------------------------------*/
#news_list { position: relative; max-width: 1600px; padding: 93px 0 120px; margin: 0 auto;}
#news_list .news_wrap{ margin: 0 auto; width: 900px;}
#news_list .news_wrap h3{ text-align: center;}
#news_list .news_wrap .news_box{ margin-top: 35px;}
/* newsボックス */
#news_list .news_wrap .news_box ul{ outline: 1px solid #a6a6a6; background: #fafafa; }
#news_list .news_wrap .news_box ul li .news_link{  padding: 28px 36px 28px 0;border-bottom: 1px solid #a6a6a6;display: flex;align-items: center;}
#news_list .news_wrap .news_box ul li .news_link .date_news { margin: 0 30px 0 36px; color: #a0a0a0;}
#news_list .news_wrap .news_box ul li .news_link .title_news { width: 100%;}
/* もっと見る */
#news_list .news_wrap .news_box .news_more_btn { outline: 1px solid #a6a6a6;width: 205px; height: 58px;position: relative;margin: 40px auto 0;}
#news_list .news_wrap .news_box .news_more_btn p{ position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); white-space: nowrap;}

.news_pagination ul{ outline: none; background: none;}
.news_pagination ul.page-numbers {
display: flex;                /* 横並びに */
justify-content: center;      /* 横方向の中央揃え */
align-items: center;          /* 縦方向の中央揃え */
gap: 8px;                     /* 要素間のスペース */
list-style: none;             /* li のマーカー（・）を消す */
padding: 0;                   /* デフォルトのパディングをリセット */
margin: 20px 0;               /* 上下マージンはお好みで */
}

/* リンクや現在ページを横並びにしつつデザイン */
.news_pagination ul.page-numbers li a,
.news_pagination ul.page-numbers li span {
display: inline-block;
padding: 6px 12px;
text-decoration: none;
color: #333;
background-color: #f5f5f5;
border-radius: 4px;
}
.news_pagination ul.page-numbers li span.current {
background-color: #333;
color: #fff;
}

@media screen and (max-width: 1100px) {
#news_list .news_wrap{ width: 81.8vw;}
}/*END*/
@media screen and (max-width: 950px) {
#news_list .news_wrap .news_box ul li .news_link .title_news { width: 70%;}
}/*END*/
@media screen and (max-width: 640px) {
#news_list { padding: 45px 0 90px;}
#news_list .news_wrap{ width: 90%;}
/* newsボックス */
#news_list .news_wrap .news_box ul li .news_link{  padding: 10px 20px 28px 20px;display: block;align-items: center; justify-content: center; margin: 0 auto;}
#news_list .news_wrap .news_box ul li .news_link .date_news { margin: 20px auto 10px; }
#news_list .news_wrap .news_box ul li .news_link .title_news { width: 100%;}
}/*END*/
/*-------------------------------------------------
bg_img
--------------------------------------------------*/
.bg_img01{ position: absolute; top: 7.5%; left: 3%; width: 299px;}
.bg_img02{ position: absolute; top: 44.5%; right: 2.6%; width: 133px;}
@media screen and (max-width: 1600px) {
.bg_img01{ width: 18.6vw;}
.bg_img02{ width: 8.3vw;right: 2.6%;}
}/*END*/
@media screen and (max-width: 1400px) {
.bg_img01{ width: 16vw; top: 6.5%;}
.bg_img02{ width: 8.3vw;right: 2.6%;}
}/*END*/
@media screen and (max-width: 1300px) {
.bg_img02{ width: 8.3vw; top: 70%; right: 2.6%;}
}/*END*/
@media screen and (max-width: 1024px) {
.bg_img01{ width: 160px;}
.bg_img02{ width: 85px; top: 70%;}
}/*END*/
@media screen and (max-width: 800px) {
.bg_img01{ width: 20vw;}
.bg_img02{ width: 10.6vw; top: 75%;}
}/*END*/
@media screen and (max-width: 640px) {
.bg_img01{ display: none;}
.bg_img02{ display: none;}
}/*END*/
/*-------------------------------------------------
    single_post_area
--------------------------------------------------*/
#single_post_area { margin-top: 135px; width: 100%;}
#single_post_area .container{ margin: 150px auto 80px;display: flex; align-items: center; justify-content: center;}
#single_post_area .container .inner { width: 800px; padding: 54px 0 85px 0; margin: 0 auto; background: #f7f7f7; border-radius: 30px;}
#single_post_area .container .inner .article_inner{ margin: 0 auto; width: 80%; display: block;}
#single_post_area .container .post_date{ color: #9b9b9b;}
#single_post_area .container .title_box{ margin-top: 25px;}
#single_post_area .container .post_content { margin: 45px auto 0px; width: 100%;}
#single_post_area .container .post_content img { max-width: 100%; height: auto;display: block;}
#single_post_area .container .inner a{ outline: none; text-decoration: underline; color: #1500fd;}
#single_post_area .container .inner a:hover{ opacity: 0.7;}
/* もっと見る */
#single_post_area .news_all_btn { outline: 1px solid #a6a6a6;width: 250px; height: 58px;position: relative;margin: 40px auto 80px;}
#single_post_area .news_all_btn p{ position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); white-space: nowrap;}
@media screen and (max-width: 900px) {
#single_post_area .container .inner{ width: 88.8vw;padding: 54px 0 85px 0;}
#single_post_area .container .inner .article_inner{ width: 85%;}
#single_post_area .news_all_btn { width: 220px; }
}/*END*/
@media screen and (max-width: 500px) {
#single_post_area .container .inner{ width: 88.8vw;padding: 54px 0 60px 0;}
}
/* 画像の中央配置 */
.aligncenter {
display: block;
margin: 0 auto;
text-align: center;
clear: both; /* 中央配置時にも他の要素の回り込みを防ぐ */
justify-content: center;
}
/* 画像の回り込みを解消 */
.alignleft {
display: block;
float: left;
clear: both; /* 左配置時の回り込みを防ぐ */
}
.alignright {
display: block;
float: right;
clear: both; /* 右配置時の回り込みを防ぐ */
}