@charset "utf-8";

/**** Clearfix ****/
.movielist:after{content:""; display:table;clear:both;}
.movielist{zoom:1;}


/* 見出し（時計台バスにおまかせください‥）
------------------------------------------------------------*/
h3 {
width: 96%;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
-ms-flex-align: center;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
/*display: table-cell;
vertical-align: middle;
height:140px;
font-size:16px;
font-size:1.6rem;
color:#800000;
font-weight:bold;
line-height:1.2;
text-align:left;
padding-left:115px;
margin:0;
background:url('../img/chara_tokkun_anim.gif') top left no-repeat;
background-size:102px 138px;
position: relative;*/
}

h3 .fukip {
font-size:16px;
font-size:1.6rem;
color:#800000;
font-weight:bold;
line-height:1.4;
border: #ccc solid 3px;
position: relative;
background: #FFF4D7;
padding: 15px 10px;
border-radius: 13px;
margin-left:20px;
}
h3 .fukip::before {
border-right: 23px solid #ccc;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
top: 8px;
content: '';
position: absolute;
left: -23px;
}
h3 .fukip::after {
content: '';
position: absolute;
border-right: 24px solid #FFF4D7;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
top: 8px;
left: -19px;
}

h3 img{
width:90px;
height:auto;
}

/* 続きを読むボタン
------------------------------------------------------------*/
.button_info {
text-align:right;
padding-top:2.5em;
/*position:relative;*/
}
.button_info button {
margin:10px;
padding:2px 20px;
font-weight:normal;
font-size:1em;
color:#900;
border:1px solid #666;
border-radius:5px;
/*box-shadow:1px 1px 1px 0px #999;*/
background:#EEE;
background:-moz-linear-gradient(top,#FFF 0%,#EEE);
background:-webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
cursor:pointer;
}
.button_info button span{
display:inline-block;
/*transform:rotate(90deg);
-ms-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);*/
}


/* ファイターズライナー
------------------------------------------------------------*/
#banner{
padding:10px;
margin:1% auto;
width:98%;
text-align:center;
border: 1px solid #ccc;
border-radius: 8px;
background:url("../fighters/img/bg_fighters.jpg");
}

#banner .fighters1{width:80%;height:auto;}
#banner .fighters2{width:80%;height:auto;margin-top:-10px;}
#banner .fighters3{margin-top:-10px;z-index:2;}
#banner .fighters4{width:80%;height:auto;margin-top:-120px;}

/* カルーセル
------------------------------------------------------------*/
.slick{
padding:0;
margin:2%;
width:96%;
overflow:hidden;
}
.slick .slider img{
width:100%;
border:1px solid #ccc;
border-radius:8px;
position:relative;
}

/*.slick-arrow {
position:absolute;
top:40%;
display:block;
width:25px;
height:50px;
background:url("../img/ama_arrow.gif");
background-repeat:no-repeat;
cursor:pointer;
font-size:0;
line-height:0;
color:transparent;
border:none;
outline:none;
z-index: 10;
}

.slick-prev {
left:10px;
background-position:left top;
}
.slick-prev:hover {
background-position:left bottom;
}
.slick-next {
right:10px;
background-position:right top;
}
.slick-next:hover {
background-position:right bottom;
}*/
/*.slick-dots {
bottom:10px;
display:block;
width:100%;
padding:0;
margin:0;
text-align:center;
}
.slick-dots li {
position:relative;
display:inline-block;
width:25px;
height:30px;
margin:0 10px;
padding:0;
cursor:pointer;
}
.slick-dots li button::before {
font-family: "FontAwesome";
font-size:14px;
line-height:14px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: "\f111";
text-align: center;
opacity: .2;
color: black;
}

.slick-dots li button {
font-size:0;
line-height:0;
display:block;
width:20px;
height:20px;
padding:0;
/*background:url("../img/circle_black.gif") no-repeat 50% 50%;*/
/*cursor:pointer;
color:transparent;
border:none;
outline:none;
background:transparent;
}
.slick-dots li.slick-active button::before {
opacity:1;
color:black;
}*/


/* スライドショー
------------------------------------------------------------*/
#rslides {
position:relative;
overflow:hidden;
/*width:700px;*/
width:96%;
/*max-width:98%;*/
padding:0;
margin:-5px auto 20px;
}

#rslides li {
-webkit-backface-visibility:hidden;
position:absolute;
display:none;
width:100%;
left:0;
top:0;
}

#rslides li:first-child {
position:relative;
display:block;
float:left;
}

#rslides img {
display:block;
width:100%;
height:auto;
float:left;
border:solid 2px #cccccc;
border-radius:10px;
}

#rslides img.pc { display: block !important; }
#rslides img.sp { display: none !important; }

/* 木村社長挨拶
------------------------------------------------------------*/
#greetings {
width:96%;
padding:0;
margin:20px auto 10px;
}
#greetings_title {
padding:8px;
text-align:center;
background: linear-gradient(180deg, #3772C0, #27279F);
font-size:28px;
font-size:2.8rem;
color:#f6f6ff;
text-shadow:0 1px 0 #999, 0 3px 0 #999, 0 4px 10px rgba(0, 0, 0, .2);
font-family: Arial, Gadget, sans-serif;
font-weight:bold;
border-radius:10px 10px 0 0;
}
#greetings_content {
padding:20px;
border:2px solid #27279F;
border-top:none;
background: linear-gradient(180deg, #f6f6ff, #fff);
border-radius:0 0 10px 10px;
line-height:1.5;
}
.dropcap:first-letter {
font-size:50px;
margin-right:4px;
margin-top:4px;
float: left;
line-height:1;/*必要*/
}
#greetings_content p{
margin: 0.5em 0;
}
#greetings_content a{
color:#000080;
font-weight:bold;
}
#greetings_content a:hover{
color:#800000;
}
#greetings_content img.kimura, #greetings_content img.iso39001 {
float:right;
margin:0 0 10px 10px;
border:1px solid #ccc;
border-radius:8px;
}
#greetings_content strong{
font-weight:bold;
font-style:italic;
}
#cn #greetings_content strong, #tw #greetings_content strong{
font-style:normal;
}

/* 新着情報
------------------------------------------------------------*/
.newinfo_title{
width:100%;
height:45px;
background:url('../img/title_newinfo.png') top left no-repeat;
padding:15px 0 5px 40px;
font-size:20px;
font-size:2.0rem;
font-weight:bold;
}
.newinfo{
width:100%;
border-bottom:2px solid #000080;
margin-bottom:20px;
}

/*.newinfo dl {
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 10px;
  margin: 0;
padding:5px;
}

.newinfo dl dt, .newinfo dl dd {
  margin: 0;
}

.newinfo dl dt {
white-space: nowrap;
color:#cc0000;
}*/

.newinfo dl{
width:100%;
float:left;
margin:0;
padding:10px;
display:inline;
border-bottom:1px dotted #999;
line-height:1.2;
}

.newinfo dt {
float:left;
width:96px;
margin-right:5px;
color:#cc0000;
white-space: nowrap;
}
.newinfo dd {
margin-left:90px;
padding:0pt 0pt 0pt 20px;
color:#333300;
/*float:left;*/
/*width:540px;*/
/*word-wrap:break-word;*/
}

.newinfo dd a{
color:#009;
text-decoration:underline;
}
.newinfo dd a:hover{
color:#900;
}

/* 動画
------------------------------------------------------------*/
.movielist_title{
width:100%;
height:45px;
background:url('../img/title_movie.png') top left no-repeat;
padding:15px 0 5px 40px;
font-size:20px;
font-size:2.0rem;
font-weight:bold;
}
.movielist{
display: grid;
grid-template-columns: repeat(2, 1fr); /* 子要素を2列に配置 */
gap: 5px 30px; /* 子要素間のスペース */
width:100%;
margin-top:10px;
border-bottom:2px solid #000080;
margin-bottom:20px;
}

.movie_content {
display: grid;
/*width:46%;
margin:10px 2%;
float:left;*/
}

.movie_title {
color:#660000;
margin-bottom:10px;
/*border-bottom: solid 3px #660000;*/
text-shadow: 1px 1px 1px #ccc;
}
.movie_title /*a*/{
color:#006;
text-decoration:none!important;
}
/*.movie_title:a:hover{
color:#900;
text-decoration:underline!important;
}
*/
.movie_content .movie{
  align-self: end; /* 画像を下揃え */
}
.movie_content .movie a img{
border:1px solid #999;
border-radius:3px;
}
.movie_content .movie a:hover img{
border:1px solid #900;
opacity: 0.5;
transition: all 0.6s ease 0s;
}


/* visit-hokkaidoバナー
------------------------------------------------------------*/
.h3_content .column{
display:table-cell;
width:50%;
padding:5px;
}
.h3_content img{
width:100%;
height:auto;
border: 1px solid #666;
border-radius: 3px;
}


.table_wrapper{
width:100%;
overflow-x:auto;
}
.table_wrapper::-webkit-scrollbar{
width:8px;
height:8px;
}
.table_wrapper::-webkit-scrollbar-track{
background: #F1F1F1;
}
.table_wrapper::-webkit-scrollbar-thumb {
background: #BCBCBC;
}

/* その他の設定
------------------------------------------------------------*/
#content a{
text-decoration:underline;
}

#content img {
max-width:100%;
height:auto;
}


/* 幅980px以下から
------------------------------------------------------------*/
@media only screen and (max-width:980px){

.h3_content .column{
width:46%;margin:0 2%;
}

}

/* 幅780px以下から
------------------------------------------------------------*/
@media only screen and (max-width:780px){

}

/* 幅640px以下から
------------------------------------------------------------*/
@media only screen and (max-width:640px){

	/*.movie_content {
	width:96%;
	margin:10px 2% 30px;
	float:none;
	}*/

	.movielist{
    grid-template-columns: 1fr; /* 1列に変更 */
	}

/* 幅480px以下から
------------------------------------------------------------*/
@media only screen and (max-width:480px){

#banner{padding:5px;}
#banner .fighters1{width:100%;height:auto;}
#banner .fighters2{width:100%;height:auto;margin-top:-5px;}
#banner .fighters4{width:100%;height:auto;}

h3 {
font-size:14px;
font-size:1.4rem;
}
h3 .fukip {
padding:10px;
font-size:16px;
font-size:1.6rem;
}
h3 img{
width:80px;
height:auto;
}

#rslides img.pc { display: none !important; }
#rslides img.sp { display: block !important; }


.newinfo dt {
float:none;
}
.newinfo dd {
margin-left:0;
}

.h3_content .column{
display:block;
width:100%;
padding:5px;
}

}

/* 幅480px以下から
------------------------------------------------------------*/
@media only screen and (max-width:480px){

	#greetings_title {
	font-size:24px;
	font-size:2.4rem;
	}
	#greetings_content img.kimura {
	float:none;
	display:block;
	margin:0 auto 10px;
	}
}


/* 幅320px以下から
------------------------------------------------------------*/
@media only screen and (max-width:320px){

	h3 {
	font-size:12px;
	font-size:1.2rem;
	}
	h3 .fukip {
	font-size:14px;
	font-size:1.4rem;
	}
	h3 img{
	width:60px;
	height:auto;
	}

}