@charset "utf-8";
/*
Theme Name: しだよしお用Base2025/06/01
Description: 基本テンプレ
Version: 1.0
*/

/*■■■■■■■■■■	ベース	■■■■■■■■■■*/
*{
    margin:0;
    padding:0;  
}
html, body, div, span, applet, object, iframe, strong,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, caption, 
tbody, tfoot, thead, table, label, tr, th, td{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	list-style:none;
	}
html{
	font-size: 62.5%;/* ベースのfont-sizeを16pxの62.5%と指定（10px）*/

	scroll-behavior: smooth;
	scroll-padding-top: 70px;

}

/*リンク色*/
/*
a:link { color: #1A0DAB; }
a:visited { color: #660099; }
a:hover { color: #1A0DAB; }
a:active { color: #1A0DAB; }
*/
a:link { color: #000; }
a:visited { color: #000; }
a:hover { color: #000; }
a:active { color: #000; }

/*下線無し*/
.link_nd {text-decoration: none;}

/*ブロック要素に（ボタン等）*/
.link_all a{
    display: block;
    height: 100%;
    width: 100%
}
/*クリック・タップイベントが無効化*/
img {
/**/
	pointer-events: none;

/*解除*/
/*
	pointer-events: auto;
*/
}

/*■■■■■■■■■■	変数	■■■■■■■■■■*/
:root{
/*■色*/

	/*基本*/
	--color_text : #000000;		/*　文字	*/
	--color_back : #fff;		/*　背景	*/
	--color_border :#999;		/*　ライン　*/
	
	--color_menu : #999999;		/*　メニュー*/
	--color_gray : #666666;		/*　グレー	*/
	--color_lgray : #999999;	/*　ライトグレー*/
	--color_llgray : #cccccc;	/*　ライトライトグレー*/
	--color_lllgray : #E0E0E0;		/*　薄ライトグレー*/
	
	
	/*三色配色*/
	--color_main : #000000;		/*　メイン	*/
	--color_sub : #666666;		/*　サブ	*/
	--color_point : #FFE201;	/*　ポイント	*/
	--color_point_u : #FFE242;	/*　ポイント薄*/
	--color_point_s : #B7DFF4;	/*　ポイントサブ*/
	
	/*色を追加する場合*/
	--color_xxx : #000000;

/*■サイズ（★は基本のサイズ）1rem=16px*/

	/*文字*/
	--size_text_lllll:10.0rem;
	--size_text_llll:4.8rem;
	--size_text_lll:3.6rem;
	--size_text_ll:3.0rem;/*ページタイトル*/
	
	--size_text_l:2.6rem;
	--size_text_lm:2.2rem;
	--size_text_m:2.0rem;/*★*/
	--size_text_s :1.8rem;
	--size_text_ss:1.6rem;
	--size_text_sss:1.2rem;
	
	/*行間*/
	--size_lh_s: 1.2;
	--size_lh_m: 1.6;/*★*/
	--size_lh_l: 2.0;

	/*パディング＆マージン*/
	--size_space_s: 0.5rem;
	--size_space_m: 1.0rem;/*★*/
	--size_space_l: 1.5rem;
}
	

body{
	font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	/*★変数でデフォルト指定*/
	color: var(--color_text);
	background-color: var(--color_back);
	font-size:var(--size_text_m);
	/*line-height:var(--size_lh_m);*/
}

/*■■■■■■■■■■	レイアウト	■■■■■■■■■■*/

.color_point_manga_hanshin{
	color: #FFE201;
}
.color_point_manga_1nen{
	color: #3AA5E8;
}


/*■ヘッダー*/
#header { }
#header_top{
	padding: var(--size_space_l);
	text-align: center;
  }
#header_top h1{
	color: var(--color_main);
	font-size: var(--size_text_l);
}
#header_top h2{
	font-weight:normal;
}

/*■フッター*/
#footer{
	text-align: center;
	padding: 1rem 0;
}

/*■コンテンツ*/
#main{ }

/*
.contents {
	font-size: var(--size_text_m);
}
*/
/*size*/
.text_m{
	font-size: var(--size_text_m);
}
.text_lm{
	font-size: var(--size_text_lm);
}
.text_l{
	font-size: var(--size_text_l);
}
.text_ll{
	font-size: var(--size_text_ll);
}
.text_lll{
	font-size: var(--size_text_lll);
}
.text_llll{
	font-size: var(--size_text_llll);
}
.text_lllll{
	font-size: var(--size_text_lllll);
}
.text_s{
	font-size: var(--size_text_s);
}
.text_ss{
	font-size: var(--size_text_ss);
}
.text_sss{
	font-size: var(--size_text_sss);
}
/*wight*/
.text_b{
	font-weight: bold;
}
.text_n{
	font-weight: normal;
}

/*color*/
.color_main{
	color: var(--color_main);
}
.color_sub{
	color: var(--color_sub);
}
.color_point{
	color: var(--color_point);
}
.color_point_u{
	color: var(--color_point_u);
}
.color_point_s{
	color: var(--color_point_s);
	filter: saturate(200%);
}
.color_gray{
	color: var(--color_gray);
}
.color_bg_gray{
	background-color: var(--color_gray);
}

.color_lgray{
	color: var(--color_lgray);
}
.color_llgray{
	color: var(--color_llgray);
}
.color_lllgray{
	color: var(--color_lllgray);
}
.color_white{
	color:white;
}
.color_red{
	color:#cc0000;
}
.color_sky{
	color:#87CEFA;
}
.color_pink{
	color:#FCB2FF;
}
.color_green{
	color:#0B6600;
}
.color_champ{
	color:#cc0000;
}

/*○次政権の色分け*/
.color_year_1{
	color:#FFE201;
}
.color_year_2{
	color:#87CEFA;
}
.color_year_3{
	color:#FCB2FF;
}

/*■背景*/
/*グレー*/
.color_bg_lgray{
	background-color: var(--color_lgray);
}
.color_bg_llgray{
	background-color: var(--color_llgray);
}
.color_bg_lllgray{
	background-color: var(--color_lllgray);
}
/*ポイント*/
.color_bg_point{
	background: var(--color_point);
}
.color_bg_point_u{
	background: var(--color_point_u);
}
.color_bg_point_s{
	background: var(--color_point_s);
}
.color_bg_red{
	background: #cc0000;
}


/*バー*/
.color_bg_bar{
	background: var(--color_point_s);
}



/*etc*/
.color_bg_black{
	background-color: #000;
}
.color_bg_white{
	background-color:white;
}

.text_ul{
	text-decoration:underline;
}

/*■BOX*/
.box_normal{
	padding:1rem;
	/*margin-bottom:1rem;*/
}

.box_border{
	padding:1rem;
	margin-bottom:1rem;
	
	border:1px solid ;
	border-color:#000;
	/*border-color : var(--color_border);*/
}
.box_nopad{
	padding:0rem;
}

.box_menu{
	padding:1rem;
	margin:1rem 0;
	border:1px solid ;
	border-color:#000;
	border-radius: 5px;
}

.box_line{
	padding:1rem 0;
	margin-bottom:2rem;
	border-top:1px solid ;
	border-bottom:1px solid ;
	border-color : var(--color_border);
}

.fbox_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.fbox_item{
width: calc(18%);
}

.fbox_container::after{/*最終列を調整*/
  content:"";
  display: block;
  width:82%;
}


.fbox_desu{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

/*■Fbox*/
.fitem_desu_a{
	width:30%;
	padding:2px;
	/**/background-color:#;
}

.fitem_desu_b{
	width:60%;
	padding:2px;
	/**/background-color:#;
}

/*■Fbox thum link*/
.fbox_thum{
  display:flex;
  justify-content:space-around;
}

.fbox_thum_item:nth-child(1){
    flex: 4;
}
.fbox_thum_item:nth-child(2){
    flex: 1;
}
.fbox_thum_item:nth-child(3){
    flex: 4;
}


/*■Fbox manga*/
.fbox_desu_img{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.fitem_desu_img_a{
	width:50%;
	margin:1rem 0;
}
.fitem_desu_img_b{
	width:45%;
	margin:1rem 0;
}
.fitem_desu_img_c{
	width:100%;
	margin:1rem 0;
}
.fitem_desu_img_d{
	width:30%;
	margin:1rem 0;
}

.fbox_desu_tag{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-first;
}

.fbox_desu_tag span{
border-radius: 6px;
border: 1px solid #666;
padding: 0.4rem;
margin: 0.4rem;
text-decoration: none;
/*width:%;*/
background-color:#fff;
}

.fbox_desu_tag a{
border-radius: 6px;
border: 1px solid #666;
padding: 0.4rem;
margin: 0.4rem;
text-decoration: none;
/*width:%;*/
background-color:#fff;
}

@media screen and (min-width: 640px) { /*640px以上（PC＆タブレット）*/
	.fitem_desu_img_c{
		width:48%;
	}
}

@media screen and (min-width: 640px) { /*640px以上（PC＆タブレット）*/
	.fitem_desu_a{
		width:30%;
	}
	.fitem_desu_b{
		width:40%;
	}
}


.fitem_desu_h{
	width:48%;
	padding:2px;
}

.fitem_desu_3{
	width:30%;
	padding:2px;
}

/*左右配置*/
.parent {
  padding: 1rem 2rem;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
}

.child_a {
  text-align: center;
  background-color: #fff;
}
.child_b {
  text-align: center;
  background-color: #fff;
}

.fbox_navi{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

.fitem_navi{
	width:45%;
	padding:2px;
	background-color:#fff;
}


/*調整*/
.lh_ss{
	line-height: 1.2;
}
.lh_s{
	line-height: var(--size_lh_s);
}
.lh_m{
	line-height: var(--size_lh_m);
}
.lh_l{
	line-height: var(--size_lh_l);
}

.ls_s{
	letter-spacing: 0.1em;
}
.ls_m{
	letter-spacing: 0.2em;
}
.ls_l{
	letter-spacing: 0.4em;
}
.text_top{
	text-align:top;
}
.text_center{
	text-align:center;
}
.text_left{
	text-align:left;
}
.text_right{
	text-align:right;
}
/*投稿部分*/
.text_area p{
margin-bottom:3rem;
}
.text_area h5{
margin-top:1.6rem;
}



/*下線*/
.uline{
	border-bottom:1px solid ; /*下線の太さ*/
  	padding-bottom:1px;/*テキストから下線までの間隔*/
}

/*改行*/
.word {
word-break: keep-all;
white-space: nowrap;

}


/*■■■■■■■■■■	モジュール	■■■■■■■■■■*/


/* ページネーションの汎用スタイル */
.nav-links ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.nav-links li > * {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  height: 40px;
}
.nav-links li > *:not(.dots) {
  width: 40px;
  border-radius: 50%;
  color: #000000;
  background: #efefef;
}
.nav-links li > .current,
.nav-links li > a:hover {
  color: #ffffff;
  background: #000000;
}


/*■メニュー*/
.global_menu {
	background-color: var(--color_lgray);
	padding: 0;
	font-size: var(--size_text_main);
}
	.global_menu_list {
		display: flex;
		justify-content: space-around;/*子要素の並び...space-around：均等*/

			 
	}
		.global_menu_list_item {
			/*
			width: 28%;
			*/			
			width: 33%;
			background:#fff;
			text-align: center;
			padding-top: var(--size_space_m);
			padding-bottom: var(--size_space_m);
			padding-left: var(--size_space_s);
			padding-right: var(--size_space_s);
			border:1px solid #666;
			
		}
			.global_menu_list_item a {
				display: block;
				width: 100%;
				height: 100%;
				text-decoration: none;
			}

/*メニューの幅を調整*/
.txt-limit {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*リスト横並びメニュー*/
.list_menu{
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
.list_menu li{
  margin: 0.5rem;
}

/*リスト「丸」「角丸」共通部分*/
.list_menu_kakumaru,.list_menu_maru{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
	/*「丸」*/
	.list_menu_maru .cat-item{
		display: inline-block;
		width: 5rem;
		height: 5rem;
		border-radius: 50%;
		text-align:center;
		line-height: 5rem;
		border:1px solid #333;
		margin:0.4rem;
	}

	/*「角丸」年代のメニュー*/
	.list_menu_kakumaru .cat-item{
		display: inline-block;
		padding: 0.8rem;
		border-radius: 1rem;
		border:1px solid ;
		border-color : var(--color_border);
		margin:0.4rem;
		width:16%;
	}

	.list_menu_kakumaru .cat-item_f{ /*footer*/
		display: inline-block;
		padding: 1.6rem 0.8rem;
		border-radius: 1rem;
		border:1px solid ;
		border-color : var(--color_border);
		margin:0.4rem;
		width:15%;
	}
	.list_menu_kakumaru .cat-item_ff{ /*footer*/
		display: inline-block;
		padding: 1.6rem 0.8rem;
		border-radius: 1rem;
		border:1px solid ;
		border-color : var(--color_border);
		margin:0.4rem;
		width:40%;
	}
	/*「角丸」年のボックスリンク*/
	.list_menu_kakumaru .box-item{
		display: inline-block;
		padding:1rem;
		border-radius: 1rem;
		border:1px solid ;
		border-color : var(--color_border);
		width:100%;
		margin: 1.5rem 1rem;		
	}
	
	.kakumaru{
		display: inline-block;
		padding:1rem;
		border-radius: 1rem;
		border:1px solid ;
		border-color : var(--color_border);
		width:100%;
		margin: 1.5rem 1rem;		
	}
	

@media screen and (min-width: 640px) { /*640px以上（PC＆タブレット）*/
	.list_menu_kakumaru .cat-item{
		width:20%;/*2段組*/
	}
	.list_menu_kakumaru .cat-item_ff{
		width:20%;/*2段組*/
	}
	.list_menu_kakumaru .box-item{
		width:45%;/*2段組*/
	}
}

.current {
	background-color: #ccc;
	font-weight:bold;
}

.current a {
	color: #000;
}

.cuurent_border{
border:solid 2px #000;
}
.cuurent_border_no{
border:solid 1px #666;
}


/*■テーブル*/


/*通常テーブル*/
.table_border {
    border-collapse: collapse;
	margin-top:2rem;
}
	.table_border td {
		padding: 0.4rem;
		border:1px solid ;
		border-color : var(--color_border);
		vertical-align: middle;
	}

/*線無しテーブル*/
.table_border_no {
    border-collapse: collapse;
}
	.table_border_no td {
		padding: 0.4rem 0.2rem;
		border:0px solid ;
		border-color : var(--color_border);
		vertical-align:middle;
	}

/*線無しテーブル（広）*/
.table_border_no_w {
    border-collapse: collapse;
}
	.table_border_no_w td {
		padding: 0.8rem 0.2rem;
		border:0px solid ;
		border-color : var(--color_border);
		vertical-align: middle;
	}

	
/*下線テーブル*/
.table_border_under {
    border-collapse: collapse;
	margin-top:2rem;
}
	.table_border_under td {
		padding: 1rem 0.4rem;
		border-bottom:1px solid ;
		border-color : var(--color_border);
		vertical-align: middle;
	}
	
	.table_border_under tr:nth-child(1) {/*一行目（上にライン）*/

		border-top:1px solid ;
		border-color : var(--color_border);
		vertical-align: middle;
	}

/*下線テーブル（高さ広い）*/
.table_border_under_ {
    border-collapse: collapse;
	margin-top:2rem;
}

	.table_border_under_ td {
		padding: 0.6rem 0.4rem;
	}
	.table_border_under_ tr:nth-child(2n+1) {
		border-top:1px solid ;
		border-color : #666;
	}

/*横スクロールテーブル*/
.table-scroll {
  overflow: scroll;
}
.table_100 {
  width: 100%;
  white-space: nowrap;
}

table .noborder {
		border-bottom:0px solid #fff;
	}
table .noborder_t {
		border-top:0px solid #fff;
	}

/*最上部にライン*/
.tr_border_top	{
		border-top:2px solid ;
		border-color : var(--color_border);
	}

/*最下部にライン*/
.last_cell_ul tr:last-child{
		border-bottom:1px solid ;
		border-color : var(--color_border);
}


/*縞々*/
.shima {
  border-collapse:collapse;
}

	.shima tr:nth-child(odd) {
	  background-color:#eee;
	}
	
	.shima tr:nth-child(even) {
	  background-color:#fff;
	}
	
	/*
	.shima tr:nth-child(1){
	  background-color:#ccc;
	}
	*/

/*fixテーブル*/
.table_fixed{
	table-layout: fixed;
}

.table_fixed td:nth-of-type(2) {
	width: 60%;
}


/*調整*/
.table_left_bold tr td:nth-of-type(1){/*1番左の列*/
     font-weight:bold;
}	
table .nowrap{
		white-space: nowrap;
}



.mg_t_s{
	margin-top:1rem;
}
.mg_t_m{
	margin-top:1.4rem;
}
.mg_t_l{
	margin-top:1.8rem;
}
.mg_t_ll{
	margin-top:3.6rem;
}

.mg_b_s{
	margin-bottom:1rem;
}
.mg_b_m{
	margin-bottom:1.4rem;
}
.mg_b_l{
	margin-bottom:1.8rem;
}
.mg_b_ll{
	margin-bottom:3.6rem;
}

.mg_l_s{
	margin-left:1rem;
}
.mg_l_m{
	margin-left:1.4rem;
}
.mg_l_l{
	margin-left:1.8rem;
}

.pg_m{
	padding:0.4rem;
}

.pg_t_s{
	padding-top:1rem;
}
.pg_t_m{
	padding-top:1.4rem;
}
.pg_t_l{
	padding-top:1.8rem;
}
.pg_b_s{
	padding-bottom:1rem;
}
.pg_b_m{
	padding-bottom:1.4rem;
}
.pg_b_l{
	padding-bottom:1.8rem;
}

.pg_l_m{
	padding-left:1rem;
}

.td_left{
	text-align: left;
}
.td_bottom{
	vertical-align: bottom;
}


/*■タブ*/
/*タブ切り替え全体のスタイル*/
.tabs {
  width: 100%;
  margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
  width: calc(99%/2);
  border-right: 1px solid #fff;
  background-color: #fff;
  line-height: 5rem;
  text-align: center;
  color: #000;
  display: block;
  float: left;
  text-align: center;
  transition: all 0.2s ease;
  
  border-top: 0px solid #fff;
}

.tab_item_index {
  width: calc(100%/1);
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  clear: both;
  overflow: hidden;
}

/**/
.tab_content_description{
	background-color: #000;
	padding:2px;
	margin:;
}

/*選択されているタブのコンテンツのみを表示*/
#rank:checked ~ #rank_content,
#year01:checked ~ #year01_content,
#year02:checked ~ #year02_content,
#year03:checked ~ #year03_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  /*background-color: var(--color_point_s);*/
  background-color: #000;
  color: #fff;
  /*font-weight: bold;*/
  border-top: 0px solid #000;
}


/*■改行*/
.nobr{
white-space:nowrap;
}

/*■丸*/
/*通常*/
.mark_maru {
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  text-align:center;
  line-height: 2.6rem;
}
/*小*/
.mark_maru_s {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  text-align:center;
  line-height: 16px;
}
/*大*/
.mark_maru_l {
  display: inline-block;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  text-align:center;
  line-height: 6rem;
   border:2px solid #000;
}
/**/
.maru_border{
   border:1px solid #000;
}



/*■バー*/
.bar {
	text-align:left;
	padding:0 0.4rem;

}
.bar_n {
	border:1px solid #333;
	text-align:left;
	margin:1rem 0 0 0.5rem;
	padding:0 0.5rem;
}
.bar_gra {
  background: linear-gradient(130deg, #efefef 0%, #eee 60%, #fff 63%, #eee 65%, #ccc 90% 100%);
}
/*バーの中身*/
.flex_bar {
	display: flex;
	align-items: flex-start;
	column-gap: 1rem;
  
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}
.flex_bar_a{
  line-height:2.4rem;
}
.flex_bar_b{
  line-height:2.4rem;
}
	
/*■fonticon*/
.ficon {
	margin: 0 0.4rem;
}
.ul_ari li{
list-style-type: disc;
margin-left : 3rem;
}

/*■非表示*/
.keshi{
	visibility: hidden;
}


/*■SNS*/

.share {

}

.share ul {
    margin: 0;
    padding: 0;
    list-style: none;
	display: flex;
	 justify-content: center;
}

.share li {
    width: 20%;
	margin:2px;
}

.share li a {
    font-size: 14px;
    display: block;
    padding: 4px 5px;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

.tweet a {
    background-color: #000;
}

.facebooklink a {
    background-color: #315096;
}

.line a {
    background-color: #00b900;
}

.hatena a {
    background-color: #008fde;
}




/*■■■■■■■■■■	Media Queries	■■■■■■■■■■*/

.flex_box_800 {
    display: flex;
	flex-wrap: wrap;
    justify-content: left;
}

@media screen and (min-width: 800px) { /*640px以上（PC＆タブレット）*/

	.flex_box_800 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.flex_item_800{
		width:800px;
	}
}

/*ボタンリンク*/
a.button{
border-radius: 10px;
border: 1px solid #666;
padding: 1rem 1rem;
display: block;
text-decoration: none;
width:90%;
margin: auto;
background-color:#eee;
}

@media screen and (min-width: 640px) { /*640px以上（PC＆タブレット）*/
	a.button{
		width:90%;
	}
}

.flex_box_menu {
    display: flex;
	flex-wrap: wrap;
    justify-content: space-around; /*均等に余白を設定 */
}

.flex_box_menu .fitem {
background-color:#fff;
}

.flex_box_menu img {
	vertical-align: middle;
}
.flex_box_menu .fitem a{
    display: block;
    height: 100%;
    width: 100%
}

@media screen and (min-width: 200px) { /*640px以上（PC＆タブレット）*/
	.flex_box_menu .fitem {
    width: 47%;
    height: auto;
	}
}

.img_img {
	height: 100vh;
	height:100lvh;
}
	
@media screen and (min-width: 640px) { /*640px以上（PC＆タブレット）*/
	img{
		max-width:800px;
	}
	.img_tate {
		max-width:600px;
	}
	
	.img_face {
		max-width:500px;
	}
	
	.img_thum_face {
		max-width:250px;
	}
	.img_thum_year {
		max-width:400px;
	}
}

table {
	width:95%;
    margin-left: auto;
    margin-right: auto;
}
	.td_mq{
		text-align: center;
	}
	.td_right{
		text-align: right;
	}

@media screen and (max-width: 640px) {/*sp*/
	table{
		width:100%;
	}
		.td_mq{
		text-align: left;
	}
}
/*幅*/
.contents{/*pc*/
	width:90%;
    margin-left: auto;
    margin-right: auto;
	margin-top:3rem;
}

@media screen and (max-width: 640px) {/*sp*/
.contents{
	width:100%;
    margin-left: auto;
    margin-right: auto;
	}
}

/*全部切り替え*/
.contents_mq>div{
    background: #fff;
}

/*PC用、スマホ用で表示切り替え*/
@media(min-width:641px){
    .for_sp{
        display: none !important;
    }
}
@media(max-width:640px){
    .for_pc{
        display: none !important;
    }
}

.for_pc {
   display: flex;
   flex-wrap: wrap;
   border-top:1px solid;
  border-bottom:1px solid;
  border-color : var(--color_border);;
  margin-bottom:1rem;
}

.item_pc_a {
   width: calc(100% / 2);
   text-align: left;
   margin:2rem 0;
}


.flex_40,.flex_40_g,.flex_80,.flex_80_g{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.flex_30{
	display: flex;
	justify-content: space-between ;
	flex-wrap: wrap;
}
.flex_30_g{
	display: flex;
	justify-content: space-between ;
	flex-wrap: wrap;
}
.flex_30_x{
	display: flex;
	justify-content: space-between ;
	flex-wrap: wrap;
}


.flex_20_g{
	display: flex;
	justify-content: space-between ;
	flex-wrap: wrap;
}

/*----------------ボタン--------------------*/
/*基本*/
.btn{
	display: inline-block;
	border-radius: 1rem;
	border:1px solid ;
	border-color : var(--color_border);
}
.btn_noborder{
	border:0px solid ;
}

/*1行2要素（40%x2）*/	
.flex_40 .btn{
	width:40%;
	padding: 1rem;
	margin:0.4rem;
}

.flex_40_g .btn{
	width:40%;
	padding: 1rem;
	margin:0.4rem;
}
.flex_40_g::after{/*疑似ボックス*/
	content:"";
	display: block;
	width:40%;
	padding: 1rem;
	margin:0.4rem;
}

/*1行1要素（80%x1）*/	
.flex_80 .btn{
	width:90%;
	padding: 1rem;
	margin:0.6rem;
}
.flex_80_g .btn{
	width:90%;
	padding: 1rem;
	margin:1rem;
}

/*1行3要素（30%x3）*/	
.flex_30 .btn{
	width:30%;
	padding: 1rem 0;
	margin: 0.6rem 0;
}

.flex_30_g .btn{
	width:30%;
	padding: 1rem 0;
	margin: 0.6rem 0;
}

.flex_30_x .btn{
	width:30%;
	padding: 0 0 1rem 0;
	margin: 0.6rem 0;
}


.flex_30_g::after{
	content:"";
	display: block;
	width:30%;
	/*padding: 1rem 0;*/
	margin: 0.6rem 0;
}

/*1行4要素（23%x4）*/
.flex_20_g .btn{
	width:23%;
	padding: 1rem 0;
	margin: 0.6rem 0;
}

.flex_20_g::after{
	content:"";
	display: block;
	width:23%;
	padding: 1rem 0;
	margin: 0.6rem 0;
}


@media screen and (min-width: 640px) { /*640px以上（PC＆タブレット）*/
/*1行4要素（20%x4）→40%*2*/
	.flex_40 .btn{
		width:45%;
		padding: 1rem;
		margin:0.4rem;
	}
	.flex_40_g .btn{
		width:20%;
		padding: 1rem;
		margin:0.4rem;
	}
	.flex_40_g::after{/*疑似ボックス*/
 	 	content:"";
 	 	display: block;
 		width:20%;
		padding: 1rem;
		margin:0.4rem;
	}
/*1行2要素（40%x2）*/	
	.flex_80 .btn{
		width:40%;
		padding: 1rem 2rem;
		margin:1rem ;
	}
	.flex_80_g .btn{
		width:40%;
		padding: 1rem 2rem;
		margin:1rem;
	}
	.flex_80_g::after{/*疑似ボックス*/
 	 	content:"";
 	 	display: block;
 		width:40%;
		padding: 1rem 2rem;
		margin:1rem;
	}
}


/*--------------------------------------
img
--------------------------------------*/

.img_drop_shadow{
	filter:drop-shadow(3px 3px 3px #666);
}

/*
img{
	width:100%;
}