﻿/*===========================================================*/
/* 個別 */
/*===========================================================*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Noto+Sans+JP:wght@500&display=swap');
body{
        font-family: 'Montserrat',"Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
        font-weight: 500;
}
.linkStyle{color: #333;border-bottom: 1px solid;}
.svg_box{display: none;}
.is-fixed{border-bottom: 3px solid;}
#loading{    background-color: #ffa300;}
.overlay{background: #fff204;}
.main_wrap{margin-top: 50vw;}
.main_wrap .menu{
    border-top: 5px solid;
    border-left: 5px solid;
    border-right: 5px solid;
}
.top_nav ul li a{
    font-weight: bold;
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0-1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
    color: black;
}
.dec02,.dec01{
    max-width: 400px;
    width: 20vw;
    transform: translate(-50%,-50%);
    top: 50%;
}
.dec01{left: 0;}
.bnr a:hover,.banner a:hover{animation:katakata 2s infinite ease-in-out alternate;}
@keyframes katakata {
  0% {transform:translate(0, 0) rotate(0deg);}
  21% {transform:translate(0, 0) rotate(0deg);}
 
  22% {transform:translate(0, 0) rotate(-3deg);}
  23% {transform:translate(0, -1px) rotate(0deg);}
  24% {transform:translate(0, -1px) rotate(3deg);}
 
  25% {transform:translate(1px, 0) rotate(-2deg);}
  26% {transform:translate(0, 1px) rotate(0deg);}
  27% {transform:translate(0, 0) rotate(3deg);}
 
  28% {transform:translate(0, 0) rotate(0deg);}
  100% {transform:translate(0, 0) rotate(0deg);}
}
.youtube_box{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  box-sizing: border-box;
}
.youtube_box iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.rectangle_img2{
	position: relative;
	overflow: hidden;
}
.rectangle_img2 img{
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.video_outer{
 background-color   : #f00000;
  background-image   : radial-gradient(#000000 20%, transparent 23%),
                       radial-gradient(#000000 20%, transparent 23%);
  background-position: 0 0, 17px 17px;
  background-size    : 34px 34px;
    border-top: 5px solid;
    border-left: 5px solid;
    border-right: 5px solid;
    padding: 0 100px;
}
.video_outer .video {
    border: 3px solid #222;
}
#contents{
    border: 5px solid;
    background-color: #ffff1a;
    padding-bottom: 0px;
    padding-top: 0px;
}
#contents .box{border-bottom: 5px solid;padding: 20px;}
#contents .box:last-of-type{border: none;}
#contents .box h3:before{content: none;}
#top_cms{
    border-left: 5px solid;
    border-right: 5px solid;
    border-top: 5px solid;
        background-color: #f00000;
    background-image: radial-gradient(#000000 20%, transparent 23%), radial-gradient(#000000 20%, transparent 23%);
    background-position: 0 0, 17px 17px;
    background-size: 34px 34px;
}
#top_cms:before{background-color: #ffff1a;}
#top_cms .cms_title p{color: #333;}
.top_cms_box .more_box .more{    background-color: #ffd800;border: 2px solid;}
.top_cms_box .more span:after{
    top: 0px;
    right: -12px;
    width: 5px;
    height: 2px;
    border-top: 5px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 5px solid transparent;
}
.top_cms_box .more span:before{
    top: 6px;
    left: 0;
    width: 100%;
    height: 2px;
}
.top_cms_box .more_box .more:before{height: 2px;}
.other .box{border: 5px solid #333;}
.loader.box{background-color: #006eff;}
.sns_box{
    position: relative;
    background-color: #fff;
}
footer{
    background-color: #212121;
    border: 5px solid;
}
/*===========================================================*/
/* コード集 */
/*===========================================================*/




/*===========================================================*/
/* 下層 */
/*===========================================================*/
#page_title{
      background-color   : #f00000;
/*  background-image   : radial-gradient(#990000 20%, transparent 23%),
                       radial-gradient(#990000 20%, transparent 23%);
  background-position: 0 0, 17px 17px;
  background-size    : 34px 34px;*/
    padding-bottom: 50px;
    border-bottom: 5px solid;
    border-top: 5px solid;
    background-image: url(Dup/img/page_bg.jpg);
    background-position: center;
}
#page_title .page_title_box{
    position: static;
    width: 100%;
    text-align: center;
    margin: 0;
}
#page_title p.font_45{font-size: 70px;    padding-right: 0;}
.page_title_box:before{content: none;}
.all_page{
    border-top: 5px solid;
    border-right: 5px solid;
    border-left: 5px solid;
    background-color: #fff204;
} 
.all_page .menu{position: relative;}
.all_page .menu.is-fixed{position: fixed;}
.all_page .sns_box{border-top: 5px solid;}
.all_page:before{background-color: #fff;}
#title_img{display: none;}
.pager{margin-bottom: 100px;}
#page_title::before,#page_title::after{
    content: "";
    position: absolute;
    top: 40px;
    left: 0;
    background-image: url(Dup/img/page_item01.png);
    width: 264px;
    height: 259px;
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: center;
}
#page_title::after{
    background-image: url(Dup/img/page_item02.png);
    left: inherit;
    right: 40px;
}
.cate_title.bg_color1{    background-color: #ed0000;}
.cate_list a{
        background-color: #0779e7;
            overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cate_list a:hover{color: #fff;}
/*===========================================================*/
/* タブレット */
/*===========================================================*/
@media screen and (max-width: 768px){
#contents .box .txt_wrap {
    width: 100%;
    padding: 0;
}
#contents .box figure{width: 100%;}
#page_title{border-top: none;}
.cate_list li{width: 48%;}
#page_title{
    background-image: url(Dup/img/page_bg_tb.jpg);
    background-size: cover;
}
#page_title::before{left: -40px;}
#page_title::after {
    right: -20px;
}

}



/*===========================================================*/
/* スマホ */
/*===========================================================*/
@media screen and (max-width: 667px){
.main_wrap {
    margin-top: 100vh;
}
.video_outer{padding: 0 20px;}
#contents .box_wrap{width: 100%!important;}
#page_title p.font_45 {
    font-size: 29px;
    letter-spacing: 4px;
}
#page_title h2, #page_title p{color: #000;}
.cate_list li {
    width: 100%;
}
.pager li {
    margin-left: 0;
}
.button_container span{height: 3px;}
#page_title::before, #page_title::after{
        background-size: 35%;    left: -90px;top: -65px;
}
#page_title::after{background-position: right;right: -5px;left: inherit;}
}


/*===========================================================*/
/* IE */
/*===========================================================*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none){



}


/*===========================================================*/
/* Firefox */
/*===========================================================*/
@-moz-document url-prefix(){

}