@charset "UTF-8";

/*テンプレートcssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("../slick/slick.css");
@import url("../slick/slick-theme.css");

/*共通
---------------------------------------------------------------------------*/
:root {
	--themecolor: #223e9b;
	--maincolor: #333333;
	--paddingpc: 80px 0;
	--paddingsp: 40px 0;
}

/*メインコンテンツ
---------------------------------------------------------------------------*/
#main {
float: none;
width:100%;
text-align: left;
overflow: hidden
}

/*slide（slick）
---------------------------------------------------------------------------*/
.slide{
position:relative;
overflow:hidden;
}
/* 画像 */
.slide img{
width:100%;
height:auto;
display:block;
}
/* テキスト */
.slide-text{
position:absolute;
top:16%;
left:10%;
color:#fff;
text-align:center;
z-index:2;
}
.slide::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
.slide-text h2{
font-size: 20px;
font-weight: normal;
text-shadow: 0 0 20px rgba(0,0,0,0.5);
opacity:0;
transform:translateY(20px);
transition:0.6s;
}
.slick-current .slide-text h2{
opacity:1;
transform:translateY(0);
}

@media screen and (min-width: 768px) {
.slide-text h2{
font-size: 25px;
}
} 
@media screen and (min-width: 981px) {
.slide-text h2{
font-size: 35px;
}
}
@media screen and (min-width: 1200px) {
.slide-text h2{
font-size: 40px;
}
}


/*きときとライナー
---------------------------------------------------------------------------*/
/* 背景 */
.bg_kitokito{
width:100%;
height: auto;
background:
url("../img/top/bg_kitokito.png") bottom center / contain no-repeat, /* 上 */
url("../img/top/bg_kitokito.jpg") top center / cover no-repeat; /* 下 */
padding:var(--paddingpc);
}
.two-column{
display:flex;
gap:20px;
padding:0 6%;
align-items:center;
}
.col:first-child{
flex:55;
}
.col:last-child{
flex:45;
}
@media(max-width:980px){
.bg_kitokito{
background:
url("../img/top/bg_kitokito_sp.png") bottom center / contain no-repeat, /* 上 */
url("../img/top/bg_kitokito_sp.jpg") top left / cover no-repeat; /* 下 */
padding:var(--paddingsp);
}
.two-column{
flex-direction:column;
}
.col{
flex:none;
width:100%;
}
}
@media screen and (min-width: 1024px) {
.col:first-child{
flex:60;
}
.col:last-child{
flex:40;
}
} 
@media (min-width:1600px){
.two-column{
max-width: 1500px;
margin: 0 auto
}
}

/* 右　きときとライナー */
.cta-grid{
display:flex;
gap:20px;
}
/* ボックス */
.cta-box{
background:#ffd400;
border-radius:25px;
width:50%;
text-align:center;
padding:30px 0;
text-decoration:none;
transition:.3s;
box-shadow:0 10px 20px rgba(0,0,0,0.1);
}
.cta-box:hover{
opacity:.85;
}

/* アイコン丸 */
.icon{
width:120px;
height:120px;
background:#fff;
border-radius:50%;
margin:0 auto 20px;
display:flex;
align-items:center;
justify-content:center;
}
.icon img{
width:auto;
height:45px;
}
.cta-box p{
margin:0;
font-size:18px;
line-height:1.6;
font-weight:600;
text-align: center
}
/* 電話 */
.cta-bottom{
display:block;
margin-top:25px;
background:#fff;
border-radius:20px;
padding:15px 5px;
text-align:center;
text-decoration:none;
font-size: 80%
}
.cta-bottom span{
font-weight:600;
padding-right: 10px
}
@media (max-width: 767px) {
.cta-box{
padding:25px 0;
}
.cta-box p{
font-size:16px;
line-height:1.4;
}
.icon{
width:90px;
height:90px;
margin:0 auto 15px;
}
.icon img{
height:35px;
}
.cta-bottom{
margin-top:20px;
padding:15px 0;
}
.cta-bottom span{
padding-right: 0
}
}


/*重要なお知らせ
---------------------------------------------------------------------------*/
.custom-background{
padding: 30px 0;
}
@media (max-width: 767px) {
.custom-background{
padding: 20px 0;
}
}
.title-wrapper {
display: flex;
align-items: center;
gap: 20px;
text-decoration: none;
color: #333;
transition: opacity 0.5s;
}
.title-wrapper:hover{
opacity:0.6;
}
.title-wrapper h2{
margin:0;
color:#e65514;
font-size:150%;
flex-shrink:0;
}
/* テキスト */
.title-wrapper h3{
margin:0;
line-height:1.5;
display:inline-flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
word-break: break-word;
}


/*バナー
---------------------------------------------------------------------------*/
.bg_banner {
display:flex;
flex-direction:column;
gap:30px;
padding:40px 6%;
box-sizing:border-box;
margin: 0 auto;
width:100%;
}
.banner img{
width:100%;
height:auto;
display:block;
}
.banner.wide{
width:100%;
}
.banner-group{
display:flex;
gap:30px;
}
.banner-group .banner{
width:50%;
}

@media(max-width:1024px){
.bg_banner{
gap:20px;
}
.banner-group{
flex-direction:column;
gap:20px;
}
.banner-group .banner{
width:100%;
}
}
@media screen and (min-width: 1200px) {
.bg_banner {
width:1100px;
padding:var(--paddingpc);
}
}

/*メッセージ
---------------------------------------------------------------------------*/
.bg_message{
background:#f3f3f3;
padding:var(--paddingpc);
}
.message_inner{
margin:auto;
text-align:left;
}
.message_inner h2{
font-size:28px;
line-height:1.7;
font-weight:600;
margin-bottom:20px;
}
.message_text{
margin-bottom:10px;
text-align:left;
line-height:2.3;
}
@media screen and (max-width:1023px){
.message_inner h2{
font-size:20px;
}
.bg_message{
padding:var(--paddingsp);
}
.message_text{
line-height:2;
}
}

/* 改行 */
.br-sp{
display:inline;
}
.br-pc{
display:none;
}
@media screen and (max-width:1023px){
.br-sp{
display:none;
}
.br-pc{
display:inline;
}
}

/*安全マネジメント
---------------------------------------------------------------------------*/
.anzen-box{
display:flex;
align-items:center;
gap:20px;
padding:25px;
max-width: 100%;
margin: 0 auto;
background:#ffffc8;
border-radius:20px;
flex-direction:column;
}
.anzen-img{
width:35%;
}
.anzen-img img{
width:100%;
height:auto;
display:block;
}
.anzen-text{
width:100%;
line-height:2;
}
@media(max-width:767px){
.anzen-box{
padding:30px;
}
.anzen-img{
width:40%;
}
}

/*YouTube　3等分
---------------------------------------------------------------------------*/
.youtube-wrap {
display: flex;
gap: 20px;
margin: 40px auto 0;
}
/* 3等分 */
.youtube-item {
width: 33.333%;
}
/* 動画の比率 */
.youtube-item iframe {
width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
}
@media (max-width: 768px) {
.youtube-wrap {
flex-direction: column;
}
.youtube-item {
width: 100%;
}
}


/*link
---------------------------------------------------------------------------*/
.bg_link{
padding:var(--paddingpc);
}
.box_bana ul{
display:flex;
flex-wrap:wrap;
gap:20px;
padding:0;
margin:0;
list-style:none;
}
.box_bana ul li{
width:calc((100% - 80px) / 5);
}
.box_bana img{
width:100%;
height:auto;
display:block;
}
@media(max-width:1023px){
.bg_link{
padding:var(--paddingsp);
}
.box_bana ul{
gap:15px;
}
.box_bana ul li{
width:calc((100% - 30px) / 3); /* 15px ×2 */
}
}
@media(max-width:767px){
.box_bana ul{
gap:10px;
}
.box_bana ul li{
width:calc((100% - 10px) / 2);
}
}




@media screen and (min-width: 768px) {

} 
@media screen and (min-width: 981px) {

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

}