@charset "utf-8";

@import url("https://use.fontawesome.com/releases/v5.0.13/css/all.css");


@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
/*
@import url(https://fonts.googleapis.com/css?family=Montserrat|Lato:400,300);
@import url(https://fonts.googleapis.com/css?family=Lato);
*/


body {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;

}


table,td{
border-color:#cccccc;
}


/* ================================================== */

.txt10px { font-size:77%; }
.txt11px { font-size:85%; }
.txt12px { font-size:93%; }
.txt13px { font-size:100%; }
.txt14px { font-size:108%; }
.txt15px { font-size:116%; }
.txt16px { font-size:123.1%; }
.txt17px { font-size:131%; }
.txt18px { font-size:138.5%; }
.txt19px { font-size:146.5%; }
.txt20px { font-size:153.9%; }
.txt21px { font-size:161.6%; }
.txt22px { font-size:167%; }
.txt23px { font-size:174%; }
.txt24px { font-size:182%; }
.txt25px { font-size:189%; }
.txt26px { font-size:197%; }


img{ vertical-align: bottom; } /* 画像下のスキマけし */

.cms_naiyo img{vertical-align: middle;} /* CKエディター絵文字用 */



blockquote{
margin:32px;
padding: 16px;
background: #f9f9f9;
font-style: italic;
color: #666;
border-left: 4px solid #9dd4ff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}
blockquote p{
margin-bottom:0 !important;
}
@media (max-width: 600px) {
blockquote{
margin-left:8px;
margin-right:8px;
padding: 8px;
}
}

BODY{

	background:#ffffff;
	/* background:#e5e6e6 url(../img/top/bg.jpg) repeat-x;  */
}

a:link, a:visited{
	color: #0066CC;
    text-decoration: underline;
}

a:hover {
	color:#F00;
	}



/* ------------------　固定 -----------------------------------　*/

#headfixarea{
height:63px;
background: #fb784a;
}

#headfixwrap{
width: 980px;
margin: 0 auto;
}

.headfixed{
  z-index: 9000;
width: 100%;
position: fixed !important;
top:0px !important;
/* border-bottom: 1px solid #ccc; */
 	animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

#fixbase{
width: 100%;
}

/* ------------------　固定 -----------------------------------　*/




#header {
	background:#fff;
	text-align:center;
	margin:0 auto;
	padding:0px;  
}


#headcover{
border-top: 3px solid #cc3300;
margin: 0;
padding: 0;
}

#headimgsml {
width:470px;
float: left;
}


/*
#headcover h1 {
text-align:left;
width:980px;

	margin:0 auto; 
	padding:3px 0 2px 0px ;
	font-size:100%;
	color:#333;
	overflow:hidden;
font-weight:normal;
}
@media (max-width: 980px) {
  #headcover h1 {
  width:100%;
	font-size:100%;
	color:#333;
	padding: 20px 20px;
}
}
*/

/* ----------SP専用------------- */
#sp_headimg img{
	
width:100%;
height:auto;
}

/* -------------------- */


/*
#header .logo {
float:left;
margin:20px 0 0 20px;
height:74px;
width:125px;
padding:0;
display:block;
	overflow:hidden;

}
*/


/* メニュー下が必要な場合  */
#mnfoot{
margin:0 auto;
width:980px;
height:10px;
background:#cccccc;
}

#sidebar1 {
	float: left; 
	width: 200px; /* 220 - 20 */
	padding: 10px 0 10px 20px;
}


#main {

}



/* ==基本上メニュー　▼ドロップダウン================================================ */

/* ---------ドロップダウンメニューバー----------- */

        #ddmenuwrap{

			float: right;
 			
			margin:0;

        /* width: 100%;
			width: 600px;

        margin:0 auto;
        padding:0px; */
        /* height:40px;	★大47px */

        /* background: #fff;	★ */
        }

		ul.ddmenu {

		/* 	width:980px;  */
			margin:0;
			padding: 0;
		}

		/* -----メインメニュー---------- */

		ul.ddmenu li {
			/* width: 16.66%;			★  100%÷7項目=14.28% 100%÷6=16% */
			float:left;
			list-style-type: none;
			position: relative;

vertical-align: middle;
						
/* ★大 */
/*
font-size:116%;
letter-spacing: 0.3em;
text-shadow: 1px 1px 3px #000;
*/
		}

		ul.ddmenu a {

    font-family: "Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;


vertical-align: middle;
			color: #fff;
		 	line-height: 63px;/* 	★大47px */
			text-align: center;
			text-decoration: none;
			font-weight: bold;
			display: block;
			
			white-space: nowrap;
			overflow: hidden;
			/* text-overflow: ellipsis; */

            padding:0 8px;
			transition: background-color 0.5s;
			
			/* border-left: 1px solid #e8e8e8;	★ */
		}
		ul.ddmenu li:last-child a{
			/* border-right:1px solid #e8e8e8;	★ */
		}		


ul.ddmenu a:before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0px;
	width: 100%;
	height: 3px;
	background: #fbf8e6;
	transform: scale(0, 1);
	transition: 0.4s;
}
ul.ddmenu a:hover:before {
	transform: scale(1);
}

/* 
		ul.ddmenu a:hover {
			   color:#cc0000;
               background:#f3f3f3;
		}


         ul.ddmenu li.ddari>a::after{
			  
			font-family: 'Font Awesome 5 Free';
			font-weight: bold;
			  content: "\f107";
			  position: absolute;
			  color:#999;
			  right: 5px;
         }
*/

		/* -----サブメニューの装飾--------------- */
		ul.ddmenu ul {
			z-index: 999999999;
			margin: 0px;
			padding: 0px;
			display: none;
			position: absolute;
		}

		ul.ddmenu ul li {
		 	width: 200px;

			/* border-top: 1px solid #ccc;	 */

		    font-size:100%;
            letter-spacing: 0em;

		}

		ul.ddmenu ul li a {
		
		background-color: #f3f3f3;
			color:#333;
		 	line-height: 38px;
			text-align: left;
			padding-left:15px;
            padding-right: 5px;
			font-weight: normal;
            
            white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			border:none;

		}

       	ul.ddmenu ul li:last-child a{
			border:none;
		}	

		ul.ddmenu ul li a:hover {
			background-color: #e3e3e3;
			color: #c00;
			
		}
		
ul.ddmenu ul li a:before{/*　下線アニメ消し　*/
	content: none;

}
		

        /* サブメニュー内のリンクなしのサブサブメニュータイトル */
        ul.ddmenu ul li.ddsubsub{
        
		background-color: #f3f3f3;
			color:#333;
		 	line-height: 38px;
			text-align: left;

			font-weight: bold;
            
            /* width: 185px; */
            padding-left:10px;
            padding-right: 5px;
            
            white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			border:none;
        }




/* ------------------　anime -----------------------------------　*/

/* スクロールCSS */
.myfadein {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
}

.myfadein_up {
  transform: translate(0, 50px);
}

.myfadein_down {
  transform: translate(0, -50px);
}

.myfadein_left {
  transform: translate(-200px, 0);
}

.myfadein_right {
    transform: translate(-200px, 0);
}

.myscrollin {
  opacity: 1;
  transform: translate(0, 0);
}


/* --- */
.boyoyon {
transition: 0.3s ease-in-out;
transition-delay: 0.1s;
animation: animScale 3.5s ease-out;
}
@keyframes animScale {
0% {transform: scale(0, 0);}
30% {transform: scale(0, 0);}
35% {transform: scale(1.2, 1.2);}
40% {transform: scale(1, 1);}
45% {transform: scale(1.1, 1.1);}
60% {transform: scale(1, 1);}
100% {transform: scale(1, 1);}
}


/* ==スマホ専用　▼展開メニュー================================================ */

.ham_open {
	display: none;
}

/* スマホ　メニューの上の住所や電話番号 */
#sp_menutop{
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	padding: 5px;
	text-align: center;
	background: #f3f3f3;
}

#sp_menutop span{
	display: block;
	padding: 10px 0px;
	font-size: 16px;
}


/* 矢印つきリスト２ */

.list2 ul{
	margin: 5px;
	padding: 0;
	font-size: 20px;
	padding-bottom: 10px;;
}

.list2 ul li{
	overflow: hidden;
	margin: 0 !important;
	width: 100%;
	text-align: left;
	padding: 0 !important;
	line-height:2em !important; 
	border: 1px #ccc solid;
	border-bottom: 0;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f0f0f0));
	background: linear-gradient(#fff, #f0f0f0);
	display:block;
	-webkit-box-shadow:0px 3px 3px rgba(000,000,000,0.1);
	box-shadow:0px 3px 3px rgba(000,000,000,0.1);
}

.list2 ul li:first-child{
	border-radius: 8px 8px 0 0;
}
.list2 ul li:last-child{
	border-radius: 0 0 8px 8px;
	border-bottom:1px #ccc solid;
}
/*
.list2 ul li a{
	color: #333;
	display: block;
	margin: 0;
	padding-left:20px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none;
	font-weight:bold;
	background:url(../img/mobile/migi.png) no-repeat right center;
}
*/

.list2 ul li a{
	position: relative;
	z-index: 1;
	color: #333;
	display: block;
	margin: 0;
	padding-left:20px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none;
	font-weight:bold;
}
.list2 ul li a:before{
	position: absolute;
	top: 0;
	right: 4%;
	content: '\f138';
	color: #ccc;
	font-size: 20px;
	font-family: "Font Awesome 5 Free";
	font-weight:900;
	z-index: -1;
}

/* サブメニュー */

.list2 ul li.submenu a{
	padding-left:40px;
	/* background:#ddd url(../img/mobile/migi.png) no-repeat right center; */
	background:#e5e5e5;
}


/* リンク無し用 */

.list2 ul li .nolink{
	color: #333;
	display: block;
	margin: 0;
	padding-left:20px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none;
	font-weight:bold;
}


.list2 ul li.colfull{
	background: -webkit-gradient(linear, left top, left bottom, from(#ffeea7), to(#ffe25a));
	background: linear-gradient(#ffeea7, #ffe25a);
}






/* ==シンプル上メニュー================================================ */

div#menu {
width: 100%;
margin:0 auto;
padding:0px;
height:40px;

overflow:hidden;
/*background: #333;*/
}

div#menu ul {
   width: 980px;
	padding:0;
	margin:0 auto;
}




div#menu li a{

display:block;
float:left;
/* padding:12px 30px 0px 30px;  
 height:28px;    40-12 */
 
 width: 16%;			/* 100%÷7項目=14.28% 100%÷6=16.66% */
 line-height: 40px;

   font-size:108%;
   text-align:center;
   font-weight:normal;
   list-style-type:none;
   
   color:#333333;
text-decoration:none;   

border-left:1px solid #e8e8e8;
}

div#menu li:last-child a{
border-right:1px solid #e8e8e8;
}



div#menu li a:hover{
   display:block;
   color:#cc0000;
   background:#ffffee;
  /* background:url(images/bg_menu_on.gif) 0 0 repeat-x; */
}



/* ================================================== */



/* ノーマル スライダー用 */
#topimg {
line-height: 0;
/*
width:980px;
margin: 0 auto;
*/

width:100%;

padding:0;
margin-bottom:0px;

background: #f3f3f3;

}

#topimg img{

width: 100%;
height: auto;
/*
    background-image: url("../img/top/loader.gif");
    background-repeat: no-repeat;
    background-position: center center;
*/
}

.delayed-image {
    /* じわっと */
    animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
}
@media screen and (max-width: 980px) {
.delayed-image {
animation: none;
transform: none;
transition: unset;
}
}

@keyframes fadeIn { 
    0% {opacity: 0} /* 始め */
    100% {opacity: 1} /* 終わり */
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* ワイド用 */
/*
#topimg {
width:100%;
padding:0;
text-align:center;
background:#00a0e9;
border-bottom:1px solid #ccc;
*/



/* ================================================== */


/* top SEO */
#toph1{
width: 100%;
background: #fff;
padding: 5px 20px;
margin-bottom:0px;
}

#toph1 h1{
text-align: center;
font-size: 18px;
font-weight: normal;
}


@media screen and (max-width: 980px) {
#toph1 h1{
font-size:85%; /* スマホ　全体的に小さくする */
text-align: left;
padding:0;
margin:0;
}
#toph1{
padding: 5px 8px;
}
}

/* 本文欄 */
#topcontent{
width: 980px;
margin: 0 auto;
font-size: 18px;
line-height: 1.7em;
padding:0;
margin-top: 30px;
}
@media screen and (max-width: 980px) {
#topcontent{
width: 100%;
padding:0px;
font-size:85%; /* スマホ　全体的に小さくする */

padding-left:5px;
padding-right:5px;
}
}



/* ================================================== */



#sub_pagetitle { 
background-color:#fbf8e6;
padding: 15px 20px;
}


#sub_pagetitle h2{
width:980px;
color: #333;
	margin:0 auto; 
	font-size:38px;
	overflow:hidden;
font-weight:normal;

}

#sub_pagetitle h2:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f35a";
  margin-right: 10px;
  color: #82c91e;
}

@media screen and (max-width: 980px) {
#sub_pagetitle h2 {

width:100%;
font-size: 4.5vmin;

}
}







#sub_pagetitle p{ /* カート用 */
display:none;
/*
float:right;

padding-left: 8px;
	margin-top: 5px;
	margin-right: 10px;
    */
}




/* 本文欄 */
#content{
width: 980px;
margin: 0 auto;
font-size: 18px;
line-height: 1.7em;
padding:15px 0;
}
@media screen and (max-width: 980px) {
#content{
width: 100%;
padding:20px;

font-size:85%; /* スマホ　全体的に小さくする */
}
}


#content p{
margin-bottom: 25px;
}
@media (max-width: 600px) {
#content{
padding:5px;
}
}

#content a:hover img{
	opacity: 0.7;
	filter: alpha(opacity=70);
	transition: opacity 0.5s;
}




/* margin bottom */
.mb_0  { margin-bottom:  0   !important; }
.mb_5  { margin-bottom:  5px !important; }
.mb_10 { margin-bottom: 10px !important; }
.mb_15 { margin-bottom: 15px !important; }
.mb_20 { margin-bottom: 20px !important; }
.mb_25 { margin-bottom: 25px !important; }
.mb_30 { margin-bottom: 30px !important; }
.mb_35 { margin-bottom: 35px !important; }
.mb_40 { margin-bottom: 40px !important; }
.mb_50 { margin-bottom: 50px !important; }
.mb_60 { margin-bottom: 60px !important; }
.mb_70 { margin-bottom: 70px !important; }
.mb_80 { margin-bottom: 80px !important; }
.mb_90 { margin-bottom: 90px !important; }
.mb_100 { margin-bottom: 100px !important; }

/* margin left */
.ml_0  { margin-left:  0   !important; }
.ml_5  { margin-left:  5px !important; }
.ml_10 { margin-left: 10px !important; }
.ml_15 { margin-left: 15px !important; }
.ml_20 { margin-left: 20px !important; }
.ml_25 { margin-left: 25px !important; }
.ml_30 { margin-left: 30px !important; }
.ml_35 { margin-left: 35px !important; }
.ml_40 { margin-left: 40px !important; }
.ml_50 { margin-left: 50px !important; }
.ml_60 { margin-left: 60px !important; }
.ml_70 { margin-left: 70px !important; }
.ml_80 { margin-left: 80px !important; }
.ml_90 { margin-left: 90px !important; }
.ml_100 { margin-left: 100px !important; }


/* ==もっと見る================================================ */

a.motto{
display:inline-block;
padding: 6px 20px;
text-decoration: none;
margin-top: 0.5em;
margin-bottom: 0.5em;
font-weight: 700;
transition: 0.2s ease-in-out;
border-radius: 30px;
color: #fff;
background-color: #5ba9f7;
}
a.motto:after{
font-family: 'Font Awesome 5 Free';
font-weight: bold;
content: "\f105";
padding-left: 7px;
}
a.motto:hover{
color: #333;
background-color: #f0f0f0;
transform: translateY(-4px);
box-shadow: 0 30px 10px -20px rgba(0,0,0,0.2);
}

/* ------ */
a.motto_s{
display:inline-block;
padding: 4px 16px;
text-decoration: none;
margin-top: 0.3em;
margin-bottom: 0.3em;
font-weight: 700;
transition: 0.2s ease-in-out;
border: 1px solid #ddd;
border-radius: 30px;
color: #333;
background-color: #fff;
}
a.motto_s:after{
font-family: 'Font Awesome 5 Free';
font-weight: bold;
content: "\f105";
padding-left: 7px;
}
a.motto_s:hover{
color: #5ba9f7;
background-color: #fbfbfb;
transform: translateY(-4px);
box-shadow: 0 29px 3px -14px rgba(0,0,0,0.02);
}
/* ------ */

.oyamotto1{
clear: both;
text-align:center;
}
.oyamotto2{
clear: both;
text-align:left;
}
.oyamotto3{
clear: both;
text-align:right;
}

/* ================================================== */

/*
h3.sec01 {
   clear:both;
   	margin-top:40px;
	margin-bottom:30px;
	padding: 18px 18px;
	font-size:167%;
	font-weight:bold;
	border: 1px solid #ccc;
	border-top: 3px solid #cc0000;
	background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
	background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
	line-height: 150%;
}
*/

h3.sec01 {
   clear:both;
   	margin-top:40px;
	margin-bottom:30px;
	padding: 6px 6px;
	font-size:167%;
	font-weight:bold;
	text-align: center;
	border-bottom: 4px solid #c00;
/*
	background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
	background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
*/
	line-height: 150%;

    font-family: "Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}


h3.sec02{
   clear:both;
   	margin-top:20px;
	margin-bottom:10px;
	padding:16px;
	font-size:123.1%; 
	font-weight:bold;
	background:#ffffff;
	border:solid 1px #aaaaaa;
	background:#f1f5f7 url(../img/icon/sec_bg02.gif) repeat-x;
	
	border-left:5px solid #CC0000;
}



h3.sec03 { /* エセ角丸、ただし左右1px出る */
   clear:both;
	font-size:123.1%;
	font-weight:bold;
	background:#cccccc; /*  */
   	margin-top:20px;
	margin-bottom:10px;
	padding:1px 0px;
}
h3.sec03 p{
	background:#EFEFEF url(../img/icon/sec_bg01.gif) repeat-x;
	margin:0 -1px;
	border:1px solid #cccccc; /*  */
	border-top-width:0;
	border-bottom-width:0;
	
	padding:4px 9px;
}

/* ================================================== */
.foot_sns{
width: 980px;
margin: 0 auto;
font-size: 18px;
line-height: 1.7em;
padding:15px 0;
}
@media screen and (max-width: 980px) {
.foot_sns{
width: 100%;
padding:20px;
}
}

/* ================================================== */
.footmenu{
font-size: 16px;
margin-top: 0px;
text-align:center;
color:#666;
padding: 15px 0 15px 0; 
border-top:1px solid #ccc;
background: #dff4fb;
}
@media screen and (max-width: 980px) {
.footmenu{
display: none;
}
}

.footmenu a{
  color:#333;
  text-decoration:none;
  transition: color 1s;
  
}

.footmenu a:hover{
  color: #F00;
  text-decoration:underline;
}
/* ================================================== */



#footer { 
   clear:both;
	padding:20px;
background:#757165;
    color: #fff;
	
}


#footer h4{
width: 920px;
font-size: 38px;
  margin:15px auto;
  margin-bottom: 30px;
  font-weight: bold;
}
@media screen and (max-width: 980px) {
#footer h4{
width: 100%;
padding: 10px;
font-size:22px; /* スマホ　全体的に小さくする */
}
}


#footer p{
width: 920px;
font-size: 18px;
  margin:15px auto;
  margin-bottom: 30px;
  line-height: 1.8em;
  text-align: center
}
@media screen and (max-width: 980px) {
#footer p{
width: 100%;
  text-align: left;
font-size:85%; /* スマホ　全体的に小さくする */
  line-height: 2.2em;
}
}

#footer p span{
margin-right: 1em;
}
@media screen and (max-width: 980px) {
#footer p span{
margin-right: 10px;
margin-left: 10px;
display: block;
}
}


#footer a{
color:#ccc;
text-decoration:none;
}
@media screen and (max-width: 980px) {
#footer a{
color:#FFFFCC;
text-decoration:underline;
}
}

#footer a:hover{
color:#fff;
text-decoration:underline;
}

#footer .counter{
clear:both;
margin:0;
padding:0;
color:#000000;
}


/* ================================================== */






/* ================================================== */






/* ================================================== */

.clr{
	clear: both;
}



/* ================================================== */

#topclm1{
	float           : left;
	width           : 720px; 
	padding         : 0;
	margin:0;
}
@media (max-width: 980px) {
#topclm1{
	float: none;
	width: 100%;
	padding: 10px 0;

  }
}



.topper_left{
width: 20%;
float: left;
padding-bottom: 20px;
text-align: center;
}
.topper_left img{
width:100%;
border-radius: 50%;
}

.topper_left h3{
text-rendering: optimizelegibility;
font-size:189%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: 700;
letter-spacing: -0.99px;
line-height: 1.5em;
}
.topper_left h3 a {
position: relative;
text-decoration: none;
color:#333;
}

/* ぬるっと下線 */
.topper_left h3 a:before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0px;
	width: 100%;
	height: 3px;
	background: #666;
	transform: scale(0, 1);
	transition: 0.4s;
}
.topper_left h3 a:hover:before {
	transform: scale(1);
}

.topper_left h3:after{
			font-family: 'Font Awesome 5 Free';
			font-weight: bold;
			  content: "\f107";
			  color:#5ba9f7;
         }

.topper_right{
width: 75%;
float: left;
padding-left: 5%;
}


.topper_right h3{
margin-top:0;
font-size: 32px;
margin-bottom:10px;
line-height: 1.2em;
}
.topper_right p{
margin-top:10px;
}
@media (max-width: 980px) {
.topper_right h3{
font-size: 20px;
  }
}


@media (max-width: 600px) {
.topper_left{
width: 40%;
float: none;
margin: 0 auto;
  }
.topper_right{
width: 100%;
float: none;
padding: 0;
}
}

/*-------------------------------------*/


#top_ex500{
	float:right;
width:100%;
margin-left: -170px;
margin-bottom:20px;
}

#top_ex500 p{
line-height:180%;
}

.top_ex500_inner{
 margin-left: 170px;
}

.newstitle{
	clear           : both;
	/* width: 500px;	 */
	width: 720px;

	height: 60px;
	background: url(../img/top/news.jpg);
}

.newstitle p{
background: url(../img/icon/mark01.png) no-repeat 0 3px;
padding-left: 12px;
	margin-top: 30px;
	margin-right: 20px;
	float: right;
}



#news0{
	/* 左にタイトル　右にリスト */
	width:150px;
	float:left;
	margin:0 20px 20px 0;

}

#newsbox{

}

#newsbox a{

font-family: 'Fjalla One', sans-serif;

    display: block;
    color: #333;
    text-decoration: none;
    	width:148px;
    line-height:  148px;
	float:left;
	margin:0 20px 20px 0;
    border: 1px solid #999;
    font-size:277%;
    text-align: center;

}

#newsbox a:hover{

    border: 1px solid #C00;
    transition: border-color 0.5s;
}


#topnews{
margin-bottom: 20px;
}



#topnews dl {
	margin          : 0 0 0 0;
}

#topnews dt {
	clear           : both;
	padding         : 0 0 0px 0;
	font-size: 77%; 

	font-family: Verdana,  Arial, sans-serif;
	font-weight: bold;
	color: #333333;
}

#topnews dt:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;/* solidは900 Brandsは400*/
  content: "\f073";
  margin-right: 7px;
  color:#666;
}


#topnews dd {
margin: 0;
	clear           : both;
	padding         : 5px 0 10px 0;
	border-bottom: 1px dotted #cccccc;
	margin-bottom: 10px;

/* ◆2行目以降を1文字下げる */
padding-left:12px;
text-indent:-8px;
}

#topnews dd:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;/* solidは900 Brandsは400*/
  content: "\f105";
  margin-right: 5px;
  color:#CC0000;
}


#topnews dd a {
	color           : #3366cc;
	text-decoration : none;
}

#topnews dd a:hover {
	text-decoration : underline;
}

#topnews dd p {
	text-indent:0px;
	margin         : 5px;
	margin-left: 0px;
	padding         : 5px 0px 0px 5px;
	color           : #333;
	line-height: 1.4em;
	font-size:93%;
}


/* バナー */
#banner_area{
width:240px;
float: right;
}

@media screen and (max-width: 980px) {
#banner_area{
width: 70%;
float: none;
margin-left:0;
margin: 30px auto;
padding:20px 20px;
}
}



/*
#banner_area img{
	margin-bottom: 10px;
}
*/

#banner_area .bn{
	margin-bottom: 10px;
}

#banner_area object{
	margin-bottom: 10px;
}


#banner_area .concept{
background:url(../img/top/concept_bg.jpg) no-repeat;
padding:7px;
margin-bottom:15px;

}

/* ================================================== */

#top_ex{
font-size:93%;
/*　margin-top:15px; */
border:1px dotted #afa596;
width:224px; /* 240-2-14 */
background-color:#f3f3f3;
padding:7px;
margin-bottom:15px;
}

#top_ex p{
margin-bottom:5px;
line-height:150%;

}

#top_ex strong{
display:block;
font-size:116%;
margin-bottom:5px;
background:url(../img/top/s.png) no-repeat center left;
padding:10px 0 10px 45px;

}


/* ================================================== */

table.tbl01 {
    border: 1px #666666 solid;
    /* border-collapse: collapse;
    border-spacing: 0;*/
}

table.tbl01 td{
    border: 1px #666666 solid;
    border-width: 0 0 1px 1px;
}


table.tbl02 {
    border: 1px #666666 solid;
}

table.tbl02 td{

    padding: 5px;
    border: 1px #666666 solid;
    border-width: 0 0 1px 1px;
}


table.tbl03 td{
	border-bottom: 1px solid #666666;
}

table.tbl04 td{
	border-bottom: 2px solid #666666;
}


table.tbl05 td{
	border-bottom: 1px dotted #666;
}
table.tbl05 th{
font-weight:bold;
	border-right: 1px dotted #666;
	border-bottom: 1px dotted #666;
}

/* ================================================== */

.dl1 dt{
font-weight:bold;
}
.dl1 dd{
margin-bottom:5px;
margin-left:20px;
}


.dl2 dt{
font-weight:bold;
background:url(../img/icon/mark02.gif) no-repeat center left;
padding-left:15px;
}
.dl2 dd{
margin-bottom:5px;
margin-left:40px;
}


.dl3 dt{
font-weight:bold;
background:url(../img/icon/mark01.png) no-repeat center left;
padding-left:15px;
}
.dl3 dd{
margin-bottom:5px;
margin-left:40px;
}


.dl4 dt{
float:left;
font-weight:bold;
background:url(../img/icon/mark02.gif) no-repeat center left;
padding-left:15px;
margin-top:10px;
margin-bottom:10px;
}
.dl4 dd{
float:left;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
}

/* ================================================== */



.ul1 li{list-style:decimal outside;}
.ul1 ul li{list-style:disc outside;}

.ul2 li{
background:url(../img/icon/mark01.png) no-repeat center left;
padding-left:15px;
margin-top:10px;
margin-bottom:10px;
}

.ul2bd li{
display:block;
background:url(../img/icon/mark01.png) no-repeat center left;
padding-left:15px;
margin-top:10px;
margin-bottom:10px;
border-bottom:1px dotted #CCCCCC;
}

.ul3 li{
background:url(../img/icon/mark02.gif) no-repeat center left;
padding-left:15px;
margin-top:10px;
margin-bottom:10px;
}

.ul3bd li{
display:block;
background:url(../img/icon/mark02.gif) no-repeat center left;
padding-left:15px;
margin-top:10px;
margin-bottom:10px;
border-bottom:1px dotted #CCCCCC;
}


/* ================================================== */
.list01{
background:url(../img/icon/mark01.png) no-repeat center left;
padding-left:15px;
}

.list02{
background:url(../img/icon/mark02.gif) no-repeat center left;
padding-left:15px;
}

.list03{
background:url(../img/icon/mark03.gif) no-repeat center left;
padding-left:15px;
}

.list_pdf{
background:url(../img/icon/mark_pdf.gif) no-repeat center left;
padding-left:40px;
padding-top:10px;
padding-bottom:10px;
}


.list_mail{
background:url(../img/icon/mark_mail.png) no-repeat center left;
padding-left:20px;
}


.list_blank1{
background:url(../img/icon/mark_blank1.gif) no-repeat center left;
padding-left:22px;
padding-top:5px;
padding-bottom:5px;
}

.list_blank1r{
background:url(../img/icon/mark_blank1.gif) no-repeat center right;
padding-right:22px;
padding-top:5px;
padding-bottom:5px;
}

.list_blank2{
background:url(../img/icon/mark_blank2.gif) no-repeat center left;
padding-left:18px;
padding-top:5px;
padding-bottom:5px;
}

.list_blank2r{
background:url(../img/icon/mark_blank2.gif) no-repeat center right;
padding-right:18px;
padding-top:5px;
padding-bottom:5px;
}

.list_keitai{
background:url(../conf/parts/ktai_icon.gif) no-repeat center left;
padding-left:20px;
}

.list_qr{
background:url(../conf/parts/qr_icon.gif) no-repeat center left;
padding-left:10px;
}


/* ==== お手軽偽角丸1pxコーナー ============================ */
.km_outer {
	background:#ccc;
	margin:0px 1px;
	padding:1px 0px;
}
.km_inner{
	background:#f3f3f3;
	margin:0 -1px;
	border:1px solid #ccc;
	border-top-width:0;
	border-bottom-width:0;
	
	padding:5px 10px;
}

.km_outer2 {
	background:#f1c43d;
	margin:0px 1px;
	padding:1px 0px;
}
.km_inner2{
	background:#fbc624 url(../img/icon/sec_bg_or.gif) repeat-x;
	margin:0 -1px;
	border:1px solid #f1c43d;
	border-top-width:0;
	border-bottom-width:0;
	
	padding:5px 10px;
}



/* ==cms用================================================ */
.text0{font-size:108%;} /* 14px */
.text1{font-size:93%;} /* 12px */
.text2{font-size:77%;} /* 10px */
.text3{font-size:123.1%;} /* 16px */
.text4{font-size:153.9%;} /* 20px */


/* ==pager===== */
#cms_pager{
clear:both;
display:block;
margin 20px auto;
text-align:center;
}
#cms_pager form{
padding:3px;
display:inline;
}

#cms_pager .current_page{
font-weight:bold;
font-size:116%;
color:#FF0000;
}

#sonouch{
display:block;
clear:both;
text-align:center;
margin-top:20px;
margin-bottom:10px;
}

#sonouch strong{
color:#FF0000;
font-weight:normal;
}

#cms_error li{
/*
background:url(../img/icon/mark02.gif) no-repeat center left;
padding-left:15px; */
margin-top:10px;
margin-bottom:10px;
}

/*
一覧例
<div id="opt_101">
<div id="doc_cms">
<div id="cms_detail">

詳細例
<div id="opt_101">
<div id="doc_cms">
<div id="cms_list">

*/


/* cms本文欄 DIV */
.cms_naiyo{

line-height: 160%;

}

.cms_naiyo h1{
   clear:both;
   	margin-top:20px;
	margin-bottom:10px;
	padding:7px 5px 7px 10px;
	font-size:197%; 
	font-weight:bold;
	/* background:#EFEFEF url(../img/icon/sec_bg01.gif) repeat-x; */
	border-bottom:solid 3px #dddddd;
}

/*
.cms_naiyo h2{
   clear:both;
   	margin-top:20px;
	margin-bottom:10px;
	padding:3px 3px 3px 10px;
	font-size:131%; 
	font-weight:bold;
	border-left:5px solid #CC0000;
	 border-bottom:solid 1px #CC0000;
}
*/


.cms_naiyo h2{

   clear:both;
   	margin-top:30px;
	margin-bottom:20px;
	padding:3px 3px 6px 2px;
	font-size:146.5%;
	font-weight:normal;
	/* border-left:5px solid #CC0000; */
	 border-bottom:solid 1px #ccc;
	 
    -moz-text-shadow:2px 2px 3px #999;
    -webkit-text-shadow:2px 2px 3px #999;
    text-shadow:2px 2px 3px #999;


	 letter-spacing: 0.2em;
	 line-height:150%;
}


     




.cms_naiyo h3{
   clear:both;
   	margin-top:30px !important;
	margin-bottom:8px !important;
	padding:3px 3px 3px 15px;
	font-size:123.1%; 
	font-weight:bold;
	border-bottom:dotted 2px #aaaaaa;
}


.cms_naiyo h3:before {
font-family: "Font Awesome 5 Free";
  font-weight: 400;/* solidは900 Brandsは400*/
  content: "\f058";
  margin-right: 5px;
  color:#ed9411;
}



.cms_naiyo h4{
   clear:both;
   	margin-top:40px;
	margin-bottom:20px;
	padding:10px;
	font-size:123.1%; 
	font-weight:bold;
	text-align:left;
	background:#FFFFCC;
	border:1px solid #FFCC00;
	font-weight:normal;
}

.cms_naiyo h5{
width:70%;
   clear:both;
   	margin-top:30px;
	margin-bottom:20px;
	margin-left:auto;
	margin-right:auto;
	padding:3px;
		padding-top:12px;
		padding-bottom:10px;
	font-size:123.1%; 
	font-weight:bold;
	text-align:center;
	background:#fbc624 url(../img/icon/sec_bg_or.gif) repeat-x;
	border:1px solid #f1c43d;
}

.cms_naiyo h6{
	width:65%;
   clear:both;
   	margin-top:30px;
	margin-bottom:20px;
	margin-left:auto;
	margin-right:auto;
	padding:10px;
	font-size:100%; 
	font-weight:normal;
	text-align:left;
	background:#f3f3f3;
	border:1px dotted #999999;
}






/* ==cms一覧ページ用====== */

/*  st0 st1 タイトルと要約の一覧形式のラッパー */

#st_0_1_wrapper{ /*  全体ラッパー */
	/* width           : 490px; */
	padding         : 5px 20px 50px 10px;
}

#st_0_1_wrapper dl {
	margin          : 7px 0 0 0;
}

#st_0_1_wrapper dt {
	clear           : both;
	padding         : 10px 0 0px 15px;
	font-size: 100%; 

	font-family: Verdana,  Arial, sans-serif;
	font-weight: bold;
	color: #333333
}
#st_0_1_wrapper dt:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;/* solidは900 Brandsは400*/
  content: "\f073";
  margin-right: 5px;
  color:#666;
}


#st_0_1_wrapper dd {
	clear           : both;
	padding         : 5px 0 5px 15px;
		border-bottom: 1px dotted #cccccc;
		margin: 0;
}


#st_0_1_wrapper dd h3{
margin-top: 5px;
margin-bottom: 5px;
padding-left:0px;
	font-weight:normal;
	font-size       : 116%;

}

#st_0_1_wrapper dd h3:before {
font-family: "Font Awesome 5 Free";
  font-weight: 900;/* solidは900 Brandsは400*/
  content: "\f101";
  margin-right: 2px;
  color:#CC0000;
}

#st_0_1_wrapper dd a {
	font-weight:bold;
	color           : #3366cc;
	text-decoration : none;
}

#st_0_1_wrapper dd a:hover {
	text-decoration : underline;
}

#st_0_1_wrapper dd p.st01_digest { /* 要約 */
	padding         : 5px 0px 0px 15px;
	color           : #666666;
}



#st_0_1_wrapper dd p.st01_sub1{ /* item用サブ1 */
padding-top:5px;
padding-left:15px;
}

#st_0_1_wrapper dd p.st01_sub2{ /* item・shop用サブサブ */
padding-left:15px;
	color:#FF0000;
}

#st_0_1_wrapper dd p.st01_price{ /* shop用金額欄 */
padding:10px 0 20px 30px;
}
#st_0_1_wrapper dd p.st01_price strong{ /* shop用金額 */
font-size:131%;
}

#st_0_1_wrapper dd p.st01_price .st01_soldout{ /* shop用売り切れ */
	font-family: Verdana,  Arial, sans-serif;
	font-weight: bold;
	font-size:93%;
	color: #cc0000;
	padding:2px;
	background:#f3f3f3;
	border:1px dotted #ccc;
}


/*  st3 st4 画像１コとタイトルと要約の一覧形式 */

#st_3_4_wrapper{/* 全体ラッパー */

margin-top:30px;
margin-bottom:30px;

}

.cmslist_st_3_4{
/* width:640px; */
/* margin:30px auto; */
margin:0;
padding:0;
/* border-top:1px dotted #ccc; */
border-top:1px solid #ccc;
}


.cmslist_st_3_4 dl,.cmslist_st_3_4 dt,.cmslist_st_3_4 dd{

margin:0;
padding:0;

}



#st_3_4_wrapper .opt_st_3{/* 小画像の背景（dtで塗ると途切れるので） */
/* background:#fff url(../img/icon/bg_st3.gif) repeat-y; */
}

#st_3_4_wrapper .opt_st_4{/* 中画像の背景（dtで塗ると途切れるので） */
/* background:#fff url(../img/icon/bg_st4.gif) repeat-y; */
}

.cmslist_st_3_4 dl{
clear: both;
padding:0px;
}

.cmslist_st_3_4 dt{ /* 画像エリア */
float:left;
margin:0px;
padding:10px;
padding-left: 0;
/* dtのwidthはcmsで指定 中止↓*/
}

#st_3_4_wrapper .opt_st_3 dt{/* 小画像 */
width: 15%;
}

#st_3_4_wrapper .opt_st_4 dt{/* 中画像 */
width: 30%;
}


.cmslist_st_3_4 dt .st34_img img{ 
/* 画像のwidthもcmsで指定中止↓ */
width: 100%;
border-radius:6px;
}

.cmslist_st_3_4 dd{ /* タイトル要約リンクエリア */

/* 下記をCMSで動的に指定 */
/* margin-left:140px; */
/* margin-left:300px; */
}

#st_3_4_wrapper .opt_st_3 dd{/* 小画像 */
float: left;
width: 85%;
padding-left: 3%;
}

#st_3_4_wrapper .opt_st_4 dd{/* 中画像 */
float: left;
width: 70%;
padding-left: 3%;
}

/* 600用 */
@media (max-width: 600px) {
	.cmslist_st_3_4 dt{ 
		float:none;
		padding:10px;
		text-align: center;
	}
	#st_3_4_wrapper .opt_st_3 dt{/* 小画像 */
		width: 100%;
	}
	#st_3_4_wrapper .opt_st_4 dt{/* 中画像 */
		width: 100%;
	}
	#st_3_4_wrapper .opt_st_3 dt .st34_img img{/* 小画像 */
		width: 40%;
	}
	#st_3_4_wrapper .opt_st_4 dt .st34_img img{/* 中画像 */
		width: 80%;
	}
	#st_3_4_wrapper .opt_st_3 dd{/* 小画像 */
		float: none;
		width: 100%;
		padding: 3%;
	}
	#st_3_4_wrapper .opt_st_4 dd{/* 中画像 */
		float:  none;
		width: 100%;
		padding: 3%;
	}
}
/* ___600用 */



.cmslist_st_3_4 dd h3{ /* タイトル */
	padding         : 0 0 0 0;
	font-size:146.5%;
margin-bottom: 0.8em;

}

.cmslist_st_3_4 dd h3:before {
font-family: "Font Awesome 5 Free";
  font-weight: 900;/* solidは900 Brandsは400*/
  content: "\f101";
  margin-right: 5px;
  color:#CC0000;
}

.cmslist_st_3_4 dd p{
margin-bottom: 0px !important;
}

.cmslist_st_3_4 dd p.st34_digest{ /* 要約 */
padding-left:15px;
padding-bottom:5px;
font-size:100%;


}
.cmslist_st_3_4 dd p.st34_date{ /* 日付 */
text-align:right;
padding-right:10px;
font-size:93%;

}
.cmslist_st_3_4 dd p.st34_date:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;/* solidは900 Brandsは400*/
  content: "\f073";
  margin-right: 5px;
  color:#999;
}


.cmslist_st_3_4 dd p.st34_code{ /* code(itemなど用) */
text-align:right;
padding-right:10px;
font-size:93%;
}

.cmslist_st_3_4 dd p.st34_sub1{ /* sub1(itemなど用) */
padding-left:15px;
}

.opt_st_4 dd p.st34_sub1{ /* sub1(st4の時だけ用) */

margin-left:15px;
   	margin-top:10px;
	margin-bottom:10px !important;
	padding:1px 1px 1px 10px;
	font-size:116%; 
	border-left:5px solid #CC0000;

}


.cmslist_st_3_4 dd p.st34_sub2{ /* sub2(itemなど用) */
padding-left:15px;
padding-bottom:5px;
color:#FF0000;
}

.cmslist_st_3_4 dd .st34_form{ /* フォーム(item用) */
text-align:right;
padding-right:20px;
padding-bottom:10px;
}


.cmslist_st_3_4  dd p.st34_price{ /* shop用金額欄 */
padding:8px 0 15px 30px;
}
.cmslist_st_3_4  dd p.st34_price strong{ /* shop用金額 */
font-size:131%;
}

.cmslist_st_3_4  dd p.st34_price .st34_soldout{ /* shop用売り切れ */
	font-family: Verdana,  Arial, sans-serif;
	font-weight: bold;
	font-size:93%;
	color: #cc0000;
	padding:2px;
	background:#f3f3f3;
	border:1px dotted #ccc;
}


/* --- st5----------碁盤list------------- */

#goban_wrapper {/* 全幅 */
/* width:760px; 3-570 4-760 5-950 */
margin:30px auto;
/*
	border-top: 1px solid #dcdcdc;
	border-left: 1px solid #dcdcdc;
*/

  display: flex;
  justify-content: center;
  flex-wrap: wrap;

}


div.goban dl,div.goban dt,div.goban dd,div.goban p{
margin: 0 !important;
padding: 0 !important;
}

div.goban {
	background:#f3f3f3;
	float: left;
	width: 189px;
/*	border: 1px solid #dcdcdc;*/
	margin: 0 7px 7px 0;
	border-radius: 6px;
box-shadow: 2px 2px 3px #ddd;
}

div.goban dl.gowrap {
	position: relative;
/*	height: 249px; */
	height: 249px;
}

div.goban dl.gowrap dt.gotitle{
	position: absolute;
	top: 180px;
	left: 12px;
	font-size: 77%;
	text-align: center;
	
	    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	
}

div.goban dl.gowrap dd.goprice {
	position: absolute;
	top: 210px;
	
	font-size: 77%;
width: 180px;
margin: 0 auto;
	font-weight: bold;
	text-align: center;
}

div.goban dl.gowrap dt.gotitle { 
width: 165px; 
}

div.goban dl.gowrap dt.gotitle a { 

}

div.goban dl.gowrap dd.goprice {

}

div.goban dl.gowrap dd.goprice .gosold{/* sold */
	color:#999999;
}

/* 画像 */
div.goban dl.gowrap dd.goimg {
	position: absolute;
	top: 15px;
	left: 1px;
	width: 188px;
	text-align: center;
}

/* 画像ワク */
div.goban dl.gowrap dd.goimg .goimgwrapper{
padding:3px;
margin:0 auto;
display:block;
}
div.goban dl.gowrap dd.goimg .goimgwrapper img{
border-radius: 3px;
}


/* icon */
div.goban dl.gowrap dd.goicon {
	position: absolute;
	top: 8px;
	right: 20px;
	width: 164px;
	text-align: right;
}

div.goban dl.gowrap dd.goicon img {
	padding-bottom: 3px;	
	vertical-align: top;
}




/* ==== */




/* 詳細用の日付 */
p.cms_doc_date{
text-align:right;
}
p.cms_doc_date:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;/* solidは900 Brandsは400*/
  content: "\f073";
  margin-right: 5px;
  color:#999;
}


/* 詳細用の要約 */
/*
h4.cms_doc_yoyaku{
border: 1px dotted #cccccc;
background:#f3f3f3;
padding:8px;
font-weight:normal;
margin-top:10px;
margin-bottom:15px;
font-size:116%;
}
*/

h4.cms_doc_yoyaku{

background:#ecf5f7;

    background: -webkit-repeating-linear-gradient(-45deg, #fdfdfd, #fdfdfd 3px, #ecf5f7 3px, #ecf5f7 6px);
    background: repeating-linear-gradient(-45deg, #fdfdfd, #fdfdfd 3px, #ecf5f7 3px, #ecf5f7 6px);

padding:20px;
font-weight:normal;
margin-top:10px;
margin-bottom:15px;
font-size:116%;
}


/* 区切り .cms_naiyo div */

.hr{
margin-top:10px;
margin-bottom:15px;
display:block;
clear:both;
border-bottom:1px dotted #999;
}

.cms_naiyo hr{
height: 1px;
border: none;
border-top: 1px #999 dotted;
clear: both;
}



/* CMSの画像拡大リンクスタイル 主に記事系*/
.cms_img_list{
background:url(../img/icon/mark_cms_link.gif) no-repeat center left;
padding-left:15px;
font-size:93%;

}


/* CMSリンク*/
.cms_link_wrapper{
/* clear:both;
display:block; */
margin:10px 0 10px 7px;

}
.cms_link_self{
background:url(../img/icon/mark03.gif) no-repeat center left;
padding-left:18px;
}
.cms_link_blank{
background:url(../img/icon/mark_blank2.gif) no-repeat center left;
padding-left:18px;
/*
padding-top:5px;
padding-bottom:5px;
*/
}


/*  word excel pdf   */
.cms_file_link{ 
/* display:block;
text-align:right; */
margin:10px 0 10px 7px;

}


/* ============記事系　画像関連======================= */

/* 全部spanに適用。(line-heightが乱れるため) */

/* □ ノーマル */
.doc_img_normal{
	clear: both;
	display:block;	
	margin:10px 0;
	/* widthはCMSで動的に指定 */
}

/* □ センター と、拡大ナシ中央 */
.doc_img_center{
	clear: both;
	display:block;	
	margin:10px auto;
	/* widthはCMSで動的に指定 */
}

/* □ テキストまわりこみ */
.doc_img_text{
/*	clear: both; */
	float:left;	
	display:block;
	margin:10px 20px 30px 0;
	/* widthはCMSで動的に指定 ↓　中止　*/
	width: 22%;
}


@media (max-width: 980px) {
.doc_img_text{
	width: 40%;
}
}


.doc_img_text img{
	width: 100%;
}

/* □ 画像右 */
.doc_img_right{
	clear: both;
	float:right;	
	display:block;
	margin:10px 0 30px 20px;
	/* widthはCMSで動的に指定 ↓　中止　*/
	width: 25%;
}

@media (max-width: 980px) {
.doc_img_right{
	width: 40%;
}
}


.doc_img_right img{
	width: 100%;
}


/* 拡大ナシ中央 */
.doc_img_big{
	clear: both;
	display:block;	
	margin:10px auto;
	/* widthはCMSで動的に指定 */
	max-width:640px;
}

/* 拡大ナシ左 */
.doc_img_in{
	clear: both;
	display:block;	
	margin:10px 0;
	/* widthはCMSで動的に指定 */
	max-width:640px;
}

/* 記事画像全部に角丸 */

.doc_img_big img,
.doc_img_in img,
.doc_img_normal img,
.doc_img_center img,
.doc_img_text img,
.doc_img_right img{
border-radius: 6px;
}

/* 101のCMSのみ角丸外す 
#opt_101 .doc_img_big img,
#opt_101 .doc_img_in img,
#opt_101 .doc_img_normal img,
#opt_101 .doc_img_center img,
#opt_101 .doc_img_text img,
#opt_101 .doc_img_right img{
border-radius: 0px;
}
*/



/* ============item系======================= */
.item_code,
.shop_code{
text-align:right;
font-size:93%;
padding-right:20px;
}


/* 詳細 item shop ----------------*/

/* dtタイプ0と1同じ */
table.cms_dt0_tbl{/* 全枠 */
width:100%;
border:0;
padding:0px;
}

.cms_dt2_date,
.cms_dt0_date{
text-align:right;
padding-right:20px;
font-size:100%;
}
.cms_dt2_code,
.cms_dt0_code{
text-align:right;
padding-right:20px;
font-size:93%;
}
.cms_dt2_sub1,
.cms_dt0_sub1{
   clear:both;
   	margin-top:10px;
	margin-bottom:10px;
	padding:2px 2px 2px 10px;
	font-size:116%; 
	border-left:5px solid #CC0000;
}

.cms_dt0_digest{
padding-left:15px;
padding-bottom:5px;
font-size:100%;
line-height:120%;
}


.cms_dt2_digest{
border:1px dotted #ccc;
margin-left:15px;
background:#f3f3f3;
padding:8px;
font-weight:normal;
margin-top:10px;
margin-bottom:15px;

font-size:100%;
line-height:120%;
}
.cms_dt2_sub2,
.cms_dt0_sub2{
padding-left:15px;
padding-bottom:5px;
color:#FF0000;
}
.cms_dt2_form,
.cms_dt0_form{
padding-left:20px;
padding-bottom:10px;
}
.cms_dt2_last,
.cms_dt0_last{
font-weight:bold;
}

td.cms_dt0_td{/* 画像エリア */
border-right:1px dotted #ccc;
border-bottom:1px dotted #ccc;
width:230px;
vertical-align:top;
padding-top:10px;
padding-bottom:10px;
background:#f8f8f8 url(../img/icon/bg_dt01.jpg) no-repeat;
}

.cms_dt0_img{/* 画像wrapper */
 padding:3px;
 margin:5px auto;
background-color:#FFFFFF;
border-top:1px solid #eee;
border-left:1px solid #eee;
border-right:1px solid #aaa;
border-bottom:1px solid #aaa;
/* widthはcms動的指定 */ 
}

td.cms_dt0_rtd{/* 本文エリア */
vertical-align:top;
padding-left:20px;
padding-right:0px;
}

table.cms_dt0_subtbl{/* サブ画像テーブル */
width:210px;
margin-top:5px;
border:none;
}
table.cms_dt0_subtbl td{/* サブ画像td */
width:105px;

text-align:center;
}


/* shop */
.cms_dt0_cartin{ /* 価格など大枠 */
padding:10px;
margin-top:5px;
margin-bottom:10px;
background:#fff7f7;
border-top:3px solid #fbb7b7;
border-bottom:1px solid #fbb7b7;
border-left:1px solid #fbb7b7;
border-right:1px solid #fbb7b7;
}
.cms_dt0_price{ /* shop用金額欄 */
margin:8px 0 15px 30px;
}
.cms_dt0_price strong{ /* shop用金額 */
font-size:131%;
}
.cms_dt0_soldout{ /* shop用売り切れ */
	font-family: Verdana,  Arial, sans-serif;
	font-weight: bold;
	font-size:93%;
	color: #cc0000;
	padding:2px;
	background:#f3f3f3;
	border:1px dotted #ccc;
}
.cms_dt0_cartform{

}
.cms_dt0_select{
margin:8px 0 8px 50px;
}
.cms_dt0_kazu{
margin:8px 0 8px 50px;
}
.cms_dt0_img_kago_in{
margin:8px 0 8px 30px;
}




/* ---dt2 専用---- */
table.cms_dt2_tbl{/* 全枠 */
width:100%;
background:#333;
border-radius:6px;
}

table.cms_dt2_tbl td{/* 全枠 */
padding:10px;
vertical-align: top;
}

.cms_dt2_img{/* 画像wrapper */
border-radius:6px;
margin:5px auto;
}

.cms_dt2_img img{
width: 100%;
height: auto;
}

.cms_dt2_tbl_td_main{
width: 82%;
vertical-align: top;
}


/* dt2 専用shop */

#shop_cms .cms_dt2_digest{
padding:0;
margin-left:0;
background:none;
border:none;
font-weight:normal;
margin-top:10px;
margin-bottom:15px;
font-size:100%;
line-height:150%;
}

.cms_dt2_cartin{ /* 価格など大枠 */
margin-top:10px;
margin-bottom:20px;
padding:10px;

background:#fff7f7;
border-top:3px solid #fbb7b7;
border-bottom:1px solid #fbb7b7;
border-left:1px solid #fbb7b7;
border-right:1px solid #fbb7b7;
}
.cms_dt2_price{ /* shop用金額欄 */
margin:8px 0 15px 20px;
}
.cms_dt2_price strong{ /* shop用金額 */
font-size:131%;
}
.cms_dt2_soldout{ /* shop用売り切れ */
	font-family: Verdana,  Arial, sans-serif;
	font-weight: bold;
	font-size:93%;
	color: #cc0000;
	padding:2px;
	background:#f3f3f3;
	border:1px dotted #ccc;
}
.cms_dt2_cartform{

}
.cms_dt2_select{
margin:8px 0 8px 30px;
}
.cms_dt2_kazu{
margin:8px 0 8px 30px;
}
.cms_dt2_img_kago_in{
margin:8px 0 8px 20px;
}
/* shop本文左右カラム */
table.cms_dt2_shoptbl{
width:100%;
margin-top:10px;
margin-bottom:20px;
}
td.cms_dt2_shoptleft{
vertical-align:top;
padding-right:20px;
}
td.cms_dt2_shopright{
border-left:1px dotted #ccc;
padding-left:10px;
width:250px;
vertical-align:top;
}





/* =====アルバム系========= */

/* 一覧s */

.al_list_date{ /* 日付 */
text-align:right;
}

.al_list_digest{ /* 要約 */
margin-top:4px;

}

.al_list_kochira{
margin:8px 0 8px 20px;
background:url(../img/icon/mark03.gif) no-repeat center left;
padding-left:18px;
}



div.al_list_wrapper {/* 全幅 */
/* width:550px; x110 */
margin-top:15px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

div.al_s_box {
background:#f8f8f8 url(../img/icon/bg_go.jpg) no-repeat;
	float: left;
	width: 109px;
	border-right: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
}

div.al_s_box dl.al_s_wrap {
	position: relative;
	height: 109px;
}


div.al_s_box dl,div.al_s_box dt,div.al_s_box dd{
margin: 0;
padding: 0;
}

/* 画像 */
div.al_s_box dl.al_s_wrap dd.al_s_img {
	position: absolute;
	top: 10px;
	
	width: 108px;
	text-align: center;
}

/* 画像ワク */
div.al_s_box dl.al_s_wrap dd.al_s_img  .al_s_img_wapper{
padding:3px;
background:#fff;
margin:0 auto;
display:block;

border-top:1px solid #eee;
border-left:1px solid #eee;
border-right:1px solid #aaa;
border-bottom:1px solid #aaa;
/* widthはcms動的指定 */
}

/* 詳細 */

.al_dt_date{ /* 日付 */
text-align:right;
}

.al_dt_digest{ /* 要約 */
border: 1px dotted #cccccc;
padding:8px;
margin-top:10px;
margin-bottom:15px;
}


div.al_dt_s_wrapper {/* 詳細sサイズ全幅 */

margin-top:15px;
margin-left:auto;
margin-right:auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

div.al_s_box dl.al_s_wrap dt.al_s_num{/* 詳細sサイズ用　画像番号 */
	position: absolute;
	font-size: 77%;
	width: 108px;
	text-align: center;		
	left: 1px;
/*	top: 0px; */
	top: 90px;

}

/* 画像lの詳細 */
div.al_dt_l_wrapper {/* 詳細lサイズ全幅 x220 */


margin-top:15px;
margin-left:auto;
margin-right:auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

div.al_l_box {

	float: left;
	width: 219px;
/*
background:#f8f8f8 url(../img/icon/bg_go.jpg) no-repeat;
	border-right: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
*/
}

div.al_l_box dl,div.al_l_box dd,div.al_l_box dt{
margin: 0;
padding: 0:
}


div.al_l_box dl.al_l_wrap {
	position: relative;
	height: 225px;
}


/* 画像 */
div.al_l_box dl.al_l_wrap dd.al_l_img {
	position: absolute;
	top: 30px;
	left: 1px; 
	width: 218px;
	text-align: center;
}

/* 画像ワク */
div.al_l_box dl.al_l_wrap dd.al_l_img  .al_l_img_wapper{
padding:3px;
background:#fff;
margin:0 auto;
display:block;

border-top:1px solid #eee;
border-left:1px solid #eee;
border-right:1px solid #000; /* #aaa */
border-bottom:1px solid #000;
/* widthはcms動的指定 */
}

div.al_l_box dl.al_l_wrap dt.al_l_num{/* 詳細lサイズ用　画像番号 */
	position: absolute;
	font-size: 77%;
	width: 218px;
	text-align: center;		
	left: 1px;
/*	top: 0px; */
	top: 5px;
	
	color:#666;

}

/* ASK form */


table.cms_ask{
	width: 90%;
	margin:10px auto;
	border:none;
}

table.cms_ask td{
	padding:10px;
	border-top: 1px dotted #666;
}
table.cms_ask th{
text-align:left;
	padding:10px;
font-weight:bold;
	border-right: 1px dotted #666;
	border-top: 1px dotted #666;
}

@media (max-width: 980px) {
table.cms_ask{
	width: 100%;
}
table.cms_ask th{
	display:block;
	width: 100%;
	border-right:none;
	padding-bottom:0;
}
table.cms_ask td{
	display:block;
	width: 100%;
	border-top: none;
	padding-bottom:20px;
}
}

@media (max-width: 600px) {
.cms_ask input[type="text"]{
	width: 100%;
}
.cms_ask textarea{
	width: 100%;
}
}



/* 確認画面 */
table.cms_ask_conf{
width:90%;
	margin:10px auto;
	border:none;
}

@media (max-width: 980px) {
table.cms_ask_conf{
	width: 100%;
}
}

table.cms_ask_conf td{
	padding:10px;
	border-bottom: 1px dotted #666;
}
table.cms_ask_conf th{
text-align:left;
background:#f3f3f3;
	padding:10px;
font-weight:bold;
	border-right: 1px dotted #666;
	border-bottom: 1px dotted #666;
}


/* shop */
/* カゴの注釈 */
.list_shop01{
font-size:93%;
margin:7px 10px 7px 30px;
background:url(../img/icon/mark02.gif) no-repeat 0px 6px;
padding-left:15px;
}


h3.shopsec{
   clear:both;
   	margin-top:20px;
	margin-bottom:10px;
	padding:3px 3px 3px 10px;
	font-size:131%; 
	font-weight:bold;
	border-left:5px solid #CC0000;
	/* border-bottom:solid 1px #CC0000; */
}


/* shopの一般form */


table.cms_spf{
	margin:10px auto;
	border:none;
}
table.cms_spf td{
	padding:10px;
	border-bottom: 1px dotted #666;
}
table.cms_spf th{
	padding:10px;
font-weight:bold;
	border-right: 1px dotted #666;
	border-bottom: 1px dotted #666;
}


/* =----------------------====================== */

h3.seclink { /* エセ角丸、ただし左右1px出る ページ切り替え用*/
   clear:both;
	font-size:116%;
	font-weight:normal;
   	margin-top:20px;
	margin-bottom:10px;
	padding:14px;
	background:#EFEFEF url(../img/icon/sec_bg01.gif) repeat-x;
	border:1px solid #cccccc; /*  */
	text-align:center;
}



h3.seclink .here{
	color:#f00;
}
h3.seclink a{
	text-decoration:none;
}


/* オフィスサンプル専用 */
#opt_201 .cms_naiyo h3,
#opt_202 .cms_naiyo h3,
#opt_203 .cms_naiyo h3,
#opt_204 .cms_naiyo h3,
#opt_205 .cms_naiyo h3,
#opt_206 .cms_naiyo h3,
#opt_207 .cms_naiyo h3,
#opt_208 .cms_naiyo h3,
#opt_209 .cms_naiyo h3,
#opt_210 .cms_naiyo h3{

}

h4.talentlist{
font-weight:normal;
	margin-bottom:10px;
text-align:left;

}


h4.dog1{
font-size:131%;
font-weight:normal;
color:#333333;
border-left:5px solid #cc0000;
padding:4px 0 4px 12px;
margin-bottom:8px;
margin-top:5px;
}

h4.dog1 a{
color:#333333;
text-decoration:none;
}








.cms_naiyo ul{
padding:10px;
margin:10px;
margin-right:0;
padding-right:0;
}

.cms_naiyo ul li{
list-style:disc outside;
margin-left:40px;
margin-bottom:15px;
}
@media (max-width: 980px) {
.cms_naiyo ul li{
margin-left:5px;
}
}

.cms_naiyo ol{
padding:10px;
margin:10px;
margin-right:0;
padding-right:0;
}

.cms_naiyo ol li{
list-style-type: decimal;
margin-left:40px;
margin-bottom:15px;
}
@media (max-width: 980px) {
.cms_naiyo ol li{
margin-left:5px;
}
}

/* バナー用など。範囲にdiv指定 */
.bnro a:hover img{
	opacity: 0.7;
	filter: alpha(opacity=70);
	transition: opacity 0.5s;
}


/* ================================================== */
/* スマホからアクセス時の、スマホモード移行用 */

#sp_footer{

width:100%;
min-width:780px;
margin:0 auto;

text-align:center;
height:120px;
font-size:300%;

background: -webkit-gradient(linear, left top, left bottom, from(#434343), to(#2e2e2e));
background: linear-gradient(#434343, #2e2e2e);
 
-webkit-box-shadow:0px -3px 8px rgba(000,000,000,0.5);
box-shadow:0px -3px 8px rgba(000,000,000,0.5);
 
 
border-top:1px solid #7c7c7c;
	
	
}
/* ==== */

/* スマホの時だけ出したいクラス(PCでは消す) */
.sp_das{
display:none;
}
.sp_das_inline{
display:none;
}



@media (max-width: 980px) {
  .sp_del{
	display: none;
  }
}

.pc_del{
	display: none;
  }
@media (max-width: 980px) {
  .pc_del{
	display: block;
  }
}


/* ================================================== */


/* ===TOPページの記事用スタイル======================================= */

.topbox1,.topbox2{

border-radius: 6px;
background:#f6f4f4;


padding:15px;
padding-right:20px;
margin-bottom:20px;

}

@media (max-width: 980px) {
.topbox1,.topbox2{
	padding:5px;
padding-right:5px;
  }
}

/* 左右にくっつける場合
@media (max-width: 980px) {
.topbox1,.topbox2{
margin-left:-5px;
margin-right:-5px;
  }
}
 */

.topbox1 h3,.topbox2 h3{
font-size:123.1%;

padding-left:10px;
margin:15px 0 5px 10px;

/* ◆2行目以降を1文字下げる */
padding-left:1em;
text-indent:-1em;
}

.topbox1 h3:before,.topbox2 h3:before  {
font-family: "Font Awesome 5 Free";
  font-weight: 900;/* solidは900 Brandsは400*/
  content: "\f00c";
  margin-right: 5px;
  color:#50b83c;
}




/* =====PICKUPボックス============================================= */

/*左右いっぱいの背景 */
.pu_box_wrappercover{
border-top: 1px solid #e2e5e8;
border-bottom: 1px solid #e2e5e8;
background: #fbf8e6;
margin:0;
padding: 40px 5px 30px 5px;
box-shadow: 0 10px 50px -40px rgba(0, 0, 0, 0.4) inset;

}


/* flex枠 */
.pu_box_wrapper{
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 980px;
margin: 0px auto;
justify-content: space-between;

animation: pu_in 1 0.8s 0s;
}
@keyframes pu_in {
  0%{transform: translateY(100px)}
  100%{transform: translateY(0px)}
}



@media (max-width: 980px) {
.pu_box_wrapper{
width: 100%;
}
}


/*基本ピックアップボックス*/
article.pu_box {
  width: 16%;/* ★ 3つ32　4つ24 */
  margin-top: 0px;
    margin-bottom: 20px;
  background: #fff;
/* 
border: 1px solid #e2e5e8;
box-shadow: 1px 2px 6px #ddd;
border-radius: 0 0 4px 4px;
*/
border-radius:  4px;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.12), 0 2px 3px 0 rgba(0, 0, 0, 0.22);

position: relative;
overflow: hidden;
transition: 0.2s ease-in-out;
}


@media (max-width: 980px) {
article.pu_box {
  width: 49%;

}
}

@media (max-width: 600px) {
article.pu_box {
  width: 100%;
}
}

/* ----------- */

.pu_box_img {
    width: 100%;
    padding-top: 54%;/* ★ 薄い42　通常54*/
    background-color: 999;
	position: relative;
}

.pu_box_img img{
       width: 100%;
       height: 100%;
       position: absolute;
       top: 0;
       object-fit: cover;
}

/* ----------- */
.pu_box a{
text-decoration: none;
}

.pu_box a.pu_link{
display: block;
transition: 0.3s ease-in-out;
}
.pu_box:hover{
/* box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1); */
box-shadow: 0 50px 30px -40px rgba(0,0,0,0.1) ;

transform: translateY(-4px);
}



a.p_id_name {
    display: inline-block;
    overflow: hidden;
    position: absolute;
    top: 13px;
    left: 11px;
    height: 22px;
    margin: 0;
    padding: 0 10px;
    border-radius: 14px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    vertical-align: middle;
    line-height: 22px;
background-color: #5ba9f7;
    text-decoration: none;
    transition: 0.3s ease-in-out;

    font-family: "Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;
display: none;
}
a.p_id_name:hover {
    color: #333;
background-color: #CCC;
}

/* ----------- */

.pu_new:after {
content: "NEW";
 transform: rotate(45deg);
    display: inline-block;
    overflow: hidden;
    position: absolute;
    top: 8px;
    right: -32px;
padding: 0px;
    margin: 0;
width: 100px;
text-align: center;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    vertical-align: middle;
    line-height: 18px;
background-color: #f00;
    text-decoration: none;
font-family: Verdana,  Arial, sans-serif;
}

/* ----------- */

article.pu_box h3{
margin: 8px 13px 0;
font-size: 17px;
line-height: 1.56;
font-weight: bold;
color: #555;

font-family: "Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}
@media (max-width: 600px) {
article.pu_box h3{
font-size:13px;
}
}


article.pu_box h4{
margin: 8px 13px 20px 13px;
font-size: 12px;
line-height: 1.56;
font-weight: 500;
color: #555;

font-family: "Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
@media (max-width: 600px) {
article.pu_box h4{
font-size:13px;
}
}
/* ---外側の大タイトル--- */

h2.pu_title{
font-size:24px;
color: #333;
width: 980px;
margin: 30px auto;
margin-top: 0;
margin-bottom: 40px;

padding-bottom: 6px;
text-align: center;
    font-family: "Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;
position: relative;
}

h2.pu_title:before {
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #86b3fc;

}


@media (max-width: 980px) {
h2.pu_title {
  width: 100%;
}
}
@media (max-width: 600px) {
h2.pu_title{
font-size:18px;
}
}


/* ============================== */



/* =====TOPカード============================================= */

.top_card_wrapper{
display: flex;
flex-wrap: wrap;
margin-bottom:30px;
}


.top_card {
  width: calc(33.3% - 10px);
/*   width: calc(25% - 10px); */
  
  margin: 5px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 1px 2px 6px #ddd;
  text-align: center;
}

@media screen and (max-width: 980px) {
.top_card {
  width: 100%;
}
}


.top_card_img {
  border-radius: 2px 2px 0 0;
  
  max-width: 100%;
  height: auto;

  /*
  object-fit: cover;
  width: 100%;
  height: 150px;
  */
}

.top_card_title {
  font-size:100%;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}
.top_card_text {
  color: #777;
  font-size:93%;
  line-height: 1.5;
}

.top_card_link {
  text-align: center;
  border-top: 1px solid #eee;
  padding: 20px;
}
.top_card_link a {
  text-decoration: none;
  color: #0bd;
  margin: 0 10px;
}
.top_card_link a:hover {
  color: #0090aa;
}


.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

/* =====アイコン============================================= */
/* <i class="cms_icon_01"></i> */
/* NEW */
.cms_icon_01:before{
			font-style: normal;
  			font-family: 'Font Awesome 5 Free';
			font-weight: bold;
			   content        : "\f005";
			  position: absolute;
			  color:#ffcc33;
			  padding-left:0.5em;
			  font-size: 0.5em;
}


/* ================================================== */


/* レスポンシブ用
@media (max-width: 980px) {
  .card{
	width: calc(33.3% - 10px);
  }
}


@media (max-width: 600px) {
.xxxxx{

  }
}

*/


/* ================================================== */