@charset "UTF-8";

/* *******************************************************************************

---
--


※remはCSS3で追加された機能になるので未対応ブラウザへの対応としてpxでの指定も重ねて記述しておきます。（remの前にpxで記述します）
※フォントファミリーは基本的にNoto Sans(google font)で設定。
※明朝体の場合はNotoserifを使用すること。
※フォントはgoogle fontを利用してください。フォルダーに入れて直接読み込まないようにしてください。



css目次

①　共通部分
②　レイアウト設定
③　Flex設定
④　アニメーション
⑤　パンくず pankuzu
⑥　ページリンク（詳細ページ　一覧へ戻るボタンなど）
⑦　WP-PageNavi
⑧　投稿記事デフォルト設置（段落、テーブルなど）
⑨　共通タイトル
⑩　共通ボタン 
⑪　display setting

******************************************************************************　*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,900');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900');  
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');


/*************　共通部分　 *******************************/
/*----------------------------------------------------
margin set
----------------------------------------------------*/
.mgt5 { margin-top: 5px!important;}
.mgt10 { margin-top: 10px!important;}
.mgt15 { margin-top: 15px!important;}
.mgt20 { margin-top: 20px!important;}
.mgt25 { margin-top: 25px!important;}
.mgt30 { margin-top: 30px!important;}
.mgt35 { margin-top: 35px!important;}
.mgt40 { margin-top: 40px!important;}

.mgb5 { margin-bottom: 5px!important;}
.mgb10 { margin-bottom: 10px!important;}
.mgb15 { margin-bottom: 15px!important;}
.mgb20 { margin-bottom: 20px!important;}
.mgb25 { margin-bottom: 25px!important;}
.mgb30 { margin-bottom: 30px!important;}
.mgb35 { margin-bottom: 35px!important;}
.mgb40 { margin-bottom: 40px!important;}
.mgb50 { margin-bottom: 50px!important;}


/************* 画面サイズが767px以上に適用　*************/
@media screen and (max-width : 768px){
.mgb50 { margin-bottom: 40px!important;}
 } 
 

/*----------------------------------------------------
padding set
----------------------------------------------------*/
.pdt5 { padding-top: 5px!important;}
.pdt10 { padding-top: 10px!important;}
.pdt15 { padding-top: 15px!important;}
.pdt20 { padding-top: 20px!important;}
.pdt25 { padding-top: 25px!important;}
.pdt30 { padding-top: 30px!important;}
.pdt35 { padding-top: 35px!important;}
.pdt40 { padding-top: 40px!important;}

.pdb5 { padding-bottom: 5px!important;}
.pdb10 { padding-bottom: 10px!important;}
.pdb15 { padding-bottom: 15px!important;}
.pdb20 { padding-bottom: 20px!important;}
.pdb25 { padding-bottom: 25px!important;}
.pdb30 { padding-bottom: 30px!important;}
.pdb35 { padding-bottom: 35px!important;}
.pdb40 { padding-bottom: 40px!important;}


.disp_inline{
 display: inline-block;
 margin: 0 5px 0 0;
}


html {
/* ルートのフォントサイズを10pxと同サイズに設定 */
 font-size: 62.5% ; 
}

body {
 font-family: 'Noto Sans JP', "ヒラギノ角ゴ ProN W3" , "Hiragino Kaku Gothic ProN," , "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 font-size: 14px;/* ベースのフォントサイズを14px相当に設定 */
 font-size: 1.4rem;
 color: #333333;
 line-height: 1.8;
 background: #e9e9e9;
 font-weight: 500;
}
table{
 table-layout: fixed;
}
/*----------------------------------------------
※ロードアニメーション
-----------------------------------------------*/
.loadanime {
	opacity: 0;
}
.loadanime_on {
	animation: fadein 3s ease;
}
@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

/************* レイアウト設定 *******************************/
#wrap {
 width: 100%;
 padding: 0 0 0 0;
 position: relative;
 overflow: hidden;
}
.inner { 
 max-width: 1040px; 
 width: 100%;
 margin: 0 auto;
}
.post-password-form {
 max-width: 1040px; 
 width: 100%;
 margin: 0 auto;
 padding: 50px 0;
}
#contents {
 width: 100%;
 margin: 0 auto 0;
 box-sizing: border-box;
}
.inner_box {
 box-sizing: border-box;
 padding: 0 50px;
}
.section_box { 
 padding: 80px 0 80px 0;
 position: relative;
}
.section_box01{
 padding: 0 0 80px 0;
 position: relative;
}
.display_sp{
 display: none;
}
/************* Flex設定 *******************************/
.flex {
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -ms-flex-wrap: wrap;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
}
.jc-bet {
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
}
.ai-cen {
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
}
.jc-end {
 -webkit-box-pack: end;
 -ms-flex-pack: end;
 justify-content: space-around;
}
.jc-cen {
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
}

/************* アニメーション *******************************/
.fadein {
 opacity: 0;
 transform: translateY(50px) scale(0.9);
 transition : all 800ms;
 overflow: hidden;
}
.fadein.scrollin{
 opacity: 1;
 transform: translateY(0) scale(1);
}
/***********************************/
.fadein1 {
 opacity: 0;
 transition : all 1000ms;
}
.fadein1.ani_txt01 {
 transform: translateY(-50px);
}
.fadein1.ani_txt02 {
 transform: translateX(50px);
}
.fadein1.ani_txt01.scrollin {
 opacity: 1;
 transform: translateY(0);
}
.fadein1.ani_txt02.scrollin {
 opacity: 1;
 transform: translateX(0);
}

/************* パンくず pankuzu *******************************/
.breadcrumbs {
 padding: 2px 0 3px 0;
 background: #f7f7f7;
}
.breadcrumbs .post { 
 min-height: 10px;
}
.breadcrumbs span { 
 display: inline-block;
 padding-left: 0;
 color: #777;
 font-size: 12px;
 font-size: 1.2rem;
 font-weight: bold;
}
.breadcrumbs span:last-child { 
 padding: 0 10px;
}
.breadcrumbs span:last-child span, .breadcrumbs a span:last-child{ 
 border: none;
 border-width: 0 0 0 0;
 padding: 0 0;
}
.breadcrumbs span:first-child { 
 display: inline-block;

}
.breadcrumbs a {
 display: inline-block;
 color: #777;
 font-weight: bold;
 text-decoration: none;
 padding: 0 10px;
}
.breadcrumbs a.home {
 border-width: 0 2px 0 2px;
 padding: 0 10px 0 0px;
}
.breadcrumbs a span { 
 color: #000; 
 font-weight: bold;
 text-decoration: none;
}
.breadcrumbs a:hover { 
 text-decoration: none;
 color: #666;
}
.breadcrumbs a:hover span { 
 text-decoration: none;
 color: #666;

}
.breadcrumbs a.post { 
 min-height: 100%;
 height: auto;
 margin: 0px;
}

/************* ページリンク（詳細ページ　一覧へ戻るボタンなど） *******************************/
.pagelink {
 margin: 0 auto 0px;
 max-width: 370px;
 width: 100%;
 position: relative;
 min-height: 50px;
}
.pagelink li.oldpage { 
 margin-right: 0px;
 width: 50px;
 padding: 0;
 position: absolute;
 left: 0;
 top: 0;
}
.pagelink li.oldpage a {
 display: block;
 border-radius: 50%;
 height: 50px;
 width: 50px;
 padding: 0;
 box-sizing: border-box;
 background: url("../img/common/arrow06.png") 50% 50% no-repeat;
}
.pagelink li.oldpage a:hover {
 background: url("../img/common/arrow06_hover.png") 50% 50% no-repeat #302a2e;
}
.pagelink li.newpage { 
 margin-right: 0px;
 width: 50px;
 padding: 0;
 position: absolute;
 right: 0;
 top: 0;
}
.pagelink li.newpage a {
 display: block;
 border-radius: 50%;
 height: 50px;
 width: 50px;
 padding: 0;
 box-sizing: border-box;
 background: url("../img/common/arrow07.png") 50% 50% no-repeat;
}
.pagelink li.newpage a:hover {
 background: url("../img/common/arrow07_hover.png") 50% 50% no-repeat #302a2e;
}

.pagelink li.listlink {
 width: 190px;
 position: absolute;
 left: 50%;
 top: 0;
 margin-left: -95px;
}
.pagelink li a {
 color: #9e7c55;
 font-weight: 500;
 padding: 11px 0 10px;
 display: block;
 text-decoration: none;
 text-align: center;
 border: 1px solid #9e7c55;
 border-radius: 25px;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease;
 position: relative;
}
.pagelink li a:hover { 
 border: 1px solid #302a2e;
 background: #302a2e;
 color: #fff;
}

/************* WP-PageNavi *******************************/
.wp-pagenavi {
 clear: both;
 margin: 0 auto 0;
 text-align: center;
}
.wp-pagenavi a, .wp-pagenavi span {
 text-decoration: none;
 margin: 0 10px;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;
 display: inline-block;
}
.wp-pagenavi span.pages {
 border: 2px solid #9e7c55;
 color: #9e7c55;
 background: none;
 padding: 9px 16.2px;
 display: none;
}
.wp-pagenavi span.current {
 color: #302a2e;
 font-weight: bold;
 height: 50px;
 width: 15px;
 line-height: 50px;
 border-radius: 50%;
}
.wp-pagenavi a {
 color: #9e7c55;
 background: none;
 height: 50px;
 width: 15px;
 line-height: 50px;
 border-radius: 50%;
}
.wp-pagenavi a:hover{
 color: #302a2e;
}
.wp-pagenavi a.nextpostslink {position: relative;text-indent: -9999px;border: 2px solid #9e7c55;width: 50px;margin: 0 0 0 7px;}

.wp-pagenavi a.nextpostslink::before {
    content: '';
    width: 10px;
    height: 10px;
    border-top: solid 2px #9e7c55;
    border-right: solid 2px #9e7c55;
    transform: rotate(45deg);
    position: absolute;
    top: 19px;
    right: 21px;
}
.wp-pagenavi a.previouspostslink:hover,.wp-pagenavi a.nextpostslink:hover {
    border: 2px solid #302a2e!important;
 background: #302a2e;
}

.wp-pagenavi a.nextpostslink:hover::before {
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
}

.wp-pagenavi a.previouspostslink {
 position: relative;
 text-indent: -9999px;
 border: 2px solid #9e7c55;
 width: 50px;
 margin: 0 7px 0 0;
}

.wp-pagenavi a.previouspostslink::before {
    content: '';
    width: 10px;
    height: 10px;
    border-top: solid 2px #9e7c55;
    border-right: solid 2px #9e7c55;
    transform: rotate(225deg);
    position: absolute;
    top: 19px;
    left: 21px;
}

.wp-pagenavi a.previouspostslink:hover::before {
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
}



/************* 投稿記事デフォルト設置（段落、テーブルなど） *******************/
.aligncenter	{
 display: block;
 margin-left: auto;
 margin-right: auto;
}
div.post img	{
 border: none;
}
.alignleft	{
 float: left;
 margin: 5px 40px 0 8px;
}
.alignright	{
 float: right;
 margin: 5px 8px 0 40px;
}
.wp-caption	{
 border: none;
 text-align: center;
 padding-top: 5px;
}
.wp-caption-text { 
 text-align:center; 
}
.detail_content {
 max-width: 800px;
 width: 100%;
}
.detail_time {
 font-size: 14px;
 text-align: right;
 color: #444;
 font-weight: bold;
 margin: 0 0 20px 0;
}

.detail_time span{
 display: inline-block;
}
.detail_content h1{
 font-size: 20px;
 color: #444;
 font-weight: bold;
 margin: 0 0 12px 0;
}
.detail_content h2{
 font-size: 26px;
 color: #e61c24;
 font-weight: bold;
 margin: 0 0 24px 0;
}
.detail_content h3 {
 font-size: 24px;
 font-size: 2.4rem;
 font-weight: 700;
 line-height: 1.3;
 color: #444;
 position: relative;
 margin: 0 0 20px 0;
 padding: 0 0 10px 0;
}
.detail_content h3:after {
 content: "";
 position: absolute;
 left: 0;
 bottom: 0;
 width: 30px;
 height: 2px;
 background: #e61c24;
}
.detail_content h4{
 font-size: 18px;
 color: #444;
 font-weight: bold;
 margin: 0 0 12px 0;
}
.detail_content h5{
 font-size: 16px;
 color: #444;
 font-weight: bold;
 margin: 0 0 5px 0;
}
.detail_content ul {
 margin: 0 0 30px 0;
}
.detail_content ul li{
 list-style: disc outside;
 margin: 0 0 0 20px;
 line-height: 1.9;
}
.detail_content ol {
 margin: 0 0 30px 0;
}
.detail_content ol li{
 list-style: decimal;
 margin: 0 0 0 20px;
 line-height: 1.9;
}
.detail_content table {
 border-collapse: collapse;
 border-spacing: 0;
 border:1px solid #ddd;
 margin: 0 0 30px 0;
 width: 100%;
}
.detail_content table th {
 padding: 20px;
 border: solid #ddd;
 border-width: 0 1px 1px 0;
 vertical-align: middle;
 font-size: 100%;
 width: 24%;
 color: #fff;
 background: #eee;
 box-sizing: border-box;
}

.detail_content table td {
 padding: 20px;
 vertical-align: top;
 border: solid #ddd;
 border-width: 0 0 1px 1px;
 font-size: 100%;
 background: #fff;
 box-sizing: border-box;
}
.detail_content table td:first-child {
 background: #eee;
}

/*************  応募フォームのcss ************************************/

input.tit_name {
    background: none;
    padding: 0;
    font-size: 20px;
    font-size: 2rem;
    color: #000;
}

.application_name_none {
 display:none;
}

/************* 共通タイトル *******************************/
.tit_style01{
 font-size: 28px;
 font-size: 2.8rem;
 color: #fff;
 text-align: center;
 font-weight: 600;
 background: url("../img/common/icon01.png") 50% 100% no-repeat;
 padding: 0 0 40px 0;
}
.tit_style01_sub{
 font-size: 14px;
 font-size: 1.4rem;
 display: block;
 margin: 10px 0 0 0;
 letter-spacing: 1px;
 text-indent: 1px;
 font-weight: 500;
}
.tit_style02{
 font-size: 28px;
 font-size: 2.8rem;
 color: #fff;
 text-align: center;
 font-weight: 600;
 background: url("../img/common/arrow01.png") 50% 100% no-repeat;
 transition: .3s;
 letter-spacing: 5px;
 text-indent: 5px;
 padding: 0 0 40px 0;
}
.tit_style02_sub{
 font-size: 14px;
 font-size: 1.4rem;
 display: block;
 margin: 5px 0 0 0;
 letter-spacing: 1px;
 text-indent: 1px;
 font-weight: 500;
}
.tit_style03{
 font-size: 28px;
 font-size: 2.8rem;
 color: #fff;
 font-weight: 700;
 position: relative;
 text-align: center;
 letter-spacing: 3px;
 text-indent: 3px;
}
.tit_style03:before{
 content: "";
 position: absolute;
 bottom: -20px;
 left: 50%;
 transform: translateX(-50%);
 width: 40px;
 height: 2px;
 background: #bf946d;
}
.tit_style04{
 font-size: 28px;
 font-size: 2.8rem;
 color: #fff;
 font-weight: 700;
 text-align: center;
 letter-spacing: 3px;
 text-indent: 3px;
}
.tit_style04 span{
 display: block;
 font-size: 14px;
 font-size: 1.4rem;
}
.tit_style05{
 font-size: 16px;
 font-size: 1.6rem;
 position: relative;
 letter-spacing: 5px;
 font-weight: 700;
 padding: 0 0 10px 0;
}
.tit_style05:before{
 content: "";
 height: 2px;
 width: 30px;
 position: absolute;
 left: 0;
 bottom: 0px;
 background: #bf946d;
}
.tit_style06{
 font-size: 28px;
 font-size: 2.8rem;
 letter-spacing: 5px;
 position: relative;
 padding: 0 0 0 23px;
 font-weight: 600;
 font-family: "Noto Serif JP",serif;
 line-height: 1.5;
}
.tit_style06:before{
 content: "";
 position: absolute;
 height: 78%;
 width: 6px;
 top: 3px;
 left: 0;
 background: #e60012;
}
.tit_style06 small{
 font-size: 14px;
 font-size: 1.4rem;
 letter-spacing: 1px;
 display: block;
 font-family: 'Noto Sans JP','sans-serif';
}
.txt_style07 {
 line-height: 2.5;
 margin: 5px 0 0 0;
 font-family: 'Noto Serif JP', serif;
 font-size: 18px;
 font-size: 1.8rem;
}
.tit_style08 {
 font-size: 44px;
 font-size: 4.4rem;
 color: #fff;
 font-weight: 700;
 text-align: center;
 letter-spacing: 3px;
 text-indent: 3px;
 font-family: 'Noto Serif JP', serif;
}
.tit_style09{
 font-size: 28px;
 font-size: 2.8rem;
 color: #333;
 font-weight: 700;
 position: relative;
 text-align: center;
 letter-spacing: 3px;
 text-indent: 3px;
}
.tit_style09:before{
 content: "";
 position: absolute;
 bottom: -20px;
 left: 50%;
 transform: translateX(-50%);
 width: 40px;
 height: 2px;
 background: #bf946d;
}
.tit_style10{
 font-size: 22px;
 font-size: 2.2rem;
 color: #bd946f;
 border-bottom: 2px solid #bd946f;
 margin: 0 0 30px 0;
 font-weight: 600;
 padding: 0 0 10px 0;
 letter-spacing: 2px;
}
/***********共通テキストスタイル***************************************/
.txt_style01{
 line-height: 3;
 margin: 5px 0 0 0;
}
.txt_style01 p{
 color: #fff;
 text-align: center;
}
.txt_style02 {
 line-height: 2.5;
 margin: 5px 0 0 0;
 font-family: 'Noto Serif JP', serif;
 font-size: 18px;
 font-size: 1.8rem;
}
.txt_style02 p{
 color: #fff;
 text-align: center;
}

/************* 共通ボタン *******************************/
.center_btn{
 margin: 0 auto;
 display: block;
}
.btn_style01{
 max-width: 260px;
 width: 100%;
}
.btn_style01 a{
 display: block;
 color: #9e7c55;
 border-radius: 30px;
 background: url("../img/common/arrow03.png") 90% 50% no-repeat;
 padding: 10px 0;
 box-sizing: border-box;
 text-align: center;
 text-decoration: none;
 font-weight: 500;
 border: 1px solid #9e7c55;
}
.btn_style01 a:hover{
 background: url("../img/common/arrow03_hover.png") 95% 50% no-repeat #9e7c55;
 color: #fff;
}
.btn_style02{
 max-width: 300px;
 width: 100%;
}

.btn_style02.width500{
 max-width: 500px;
}

.btn_style02 a{
 display: block;
 color: #fff;
 border: 1px solid #9e7c55;
 border-radius: 40px;
 background: url("../img/common/arrow03_hover.png") 90% 50% no-repeat #9e7c55;
 padding: 17px 0;
 box-sizing: border-box;
 text-align: center;
 text-decoration: none;
 font-weight: 500;
 font-size: 18px;
 font-size: 1.8rem;
}
.btn_style02 a:hover{
 background: url("../img/common/arrow03.png") 95% 50% no-repeat #fff;
 color: #9e7c55;
}
.btn_style03{
 max-width: 360px;
 width: 100%;
}
.btn_style03 a{
 display: block;
 color: #fff;
 border-radius: 40px;
 background: url("../img/common/arrow03_hover.png") 90% 50% no-repeat #302a2e;
 padding: 17px 0;
 box-sizing: border-box;
 text-align: center;
 text-decoration: none;
 font-weight: 500;
 font-size: 18px;
 font-size: 1.8rem;
 letter-spacing: 2px;
 text-indent: 2px;
}
.btn_style03 a:hover{
 background: url("../img/common/arrow03_hover.png") 95% 50% no-repeat #9e7c55;
}
.btn_style06{
 max-width: 260px;
 width: 100%;
}
.btn_style06 a{
 display: block;
 color: #9e7c55;
 border: 1px solid;
 border-radius: 30px;
 background: url("../img/common/arrow03.png") 90% 50% no-repeat;
 padding: 10px 0;
 box-sizing: border-box;
 text-align: center;
 text-decoration: none;
 font-weight: 500;
}
.btn_style06 a:hover{
 background: url("../img/common/arrow03.png") 95% 50% no-repeat;
}
.btn_style07{
 display: inline-block;
 max-width: 200px;
 width: 100%;
}
.btn_style07 a{
 display: block;
 color: #9e7c55;
 border: 1px solid #9e7c55;
 border-radius: 30px;
 background: url("../img/common/arrow03.png") 90% 50% no-repeat;
 padding: 10px 0;
 box-sizing: border-box;
 text-align: center;
 text-decoration: none;
 font-weight: 500;
 transition: .3s;
}
.btn_style07 a:hover{
 background: url("../img/common/arrow03_hover.png") 94% 50% no-repeat #9e7c55;
 color: #fff;
}
.btn_style08{
 max-width: 240px;
 width: 100%;
 color: #fff;
 text-align: center;
 background: #bd946f;
 border-radius: 10px;
 padding: 15px 20px 15px 20px;
 box-sizing: border-box;
 font-size: 18px;
 font-size: 1.8rem;
 border: 2px solid #bd946f;
 transition: 0.3s ease;
}
.btn_style08:hover{
 color: #bd946f;
 background: #fff;
 border: 2px solid #bd946f;
 cursor: pointer;
}
.btn_style09{
 max-width: 120px;
 width: 100%;
 margin: 0 auto;
}
.btn_style09 a{
 display: block;
 color: #fff;
 text-align: center;
 border-radius: 30px;
 padding: 5px 10px 5px 10px;
 background: #bd946f;
 transition: 0.3s ease;
 border: 1px solid #bd946f;
 margin: 0 auto;
 box-sizing: border-box;
 text-decoration: none;
}
.btn_style09 a:hover{
 color: #bd946f;
 background: #fff;
}
.btn_style10{
 max-width: 100%;
 width: 360px;
 color: #fff;
 background: url("../img/common/arrow03_hover.png") 90% 50% no-repeat #9e7c55;
 padding: 20px 40px;
 box-sizing: border-box;
 margin: 40px auto 0;
 border: 1px solid #9e7c55;
 font-size: 18px;
 font-size: 1.8rem;
 border-radius: 50px;
 text-align: center;
 text-decoration: none;
 font-weight: 500;
 transition: .3s;
}
.btn_style10:hover{
 background: url("../img/common/arrow03.png") 95% 50% no-repeat #fff;
 color: #9e7c55;
 border: 1px solid #9e7c55;
 cursor: pointer;
}
 
/******************************* display setting　*******************************/


/************* 画面サイズが1060px以下に適用　*************/
@media screen and (max-width : 1060px){
.inner {
 width: 100%;
 padding: 0 20px;
 box-sizing: border-box;
}
.pankuzu {
 width: 100%;
 padding: 0 20px;
 box-sizing: border-box;
}
 .tit_style02 {
    font-size: 24px;
    font-size: 2.4rem;
}
.btn_style02 {
  max-width: 260px;
}
}

/************* 画面サイズが767px以上に適用　*************/
@media screen and (min-width : 768px){
.sp_view{
 display: none;
}
 
 .br-sp {
  display: none;
 } 
 
 .br-pc {
  display: block;
 } 
 
}

/************* 画面サイズが767px以下に適用　*************/
@media screen and (max-width : 767px){

 .br-sp {
  display: block;
 } 
 
 .br-pc {
  display: none;
 } 
 
.section_box {
 padding: 40px 0 40px 0;
}
.section_box01{
 padding: 0 0 40px 0;
}
.display_pc{
 display: none;
}
.display_sp{
 display: block;
}
 
/************* WP-PageNavi *************/
.wp-pagenavi {
 margin: 0 auto 0;
}
.wp-pagenavi a, .wp-pagenavi span {
 margin: 0 6px;
}	

/************* 共通タイトルスマホ設定 *************/
.tit_style01 {
 font-size: 24px;
 font-size: 2.4rem;
 padding: 0 20px 40px;
}
.tit_style02 {
 letter-spacing: 2px;
 text-indent: 2px;
 font-size: 19px;
 font-size: 1.9rem;
}
.tit_style03 {
 font-size: 24px;
 font-size: 2.4rem;
}
.tit_style03:before {
 bottom: -10px;
}
 .tit_style04{
 font-size: 19px;
 font-size: 1.9rem;
 letter-spacing: 2px;
 text-indent: 2px;
 }
.tit_style08 {
 font-size: 23px;
 font-size: 2.3rem;
}
.tit_style09 {
 font-size: 22px;
 font-size: 2.2rem;
 padding: 0 20px;
}
.tit_style09:before {
 bottom: -10px;
}
.tit_style10 {
 font-size: 19px;
 font-size: 1.9rem
}

/************* 共通ボタンスマホ設定 *************/	
.btn_style02 a {
 padding: 13px 0;
 font-size: 15px;
 font-size: 1.5rem;
}
.btn_style09 {
 border-radius: 10px;
 font-size: 10px;
 font-size: 1.0rem;
}
 .re01_inner .table_style04 td .btn_style09 {
   max-width: 75px;
   width: 100%; 
}   
 
 .re01_inner .table_style04 td .btn_style09 a {
    padding: 5px 6px 5px 6px;
} 
 
.btn_style10{
 display: block;
 margin: 40px auto 20px;
 width: 260px;
 font-size: 14px;
 font-size: 1.4rem;
}
 
/**************共通テキストスマホ設定*************************/
 .txt_style02 {
 font-size: 12px;
 font-size: 1.2rem;
}

}
/************* 記事内の画像 画面サイズが640px以下に適用　*************/

@media screen and (max-width : 640px){
.alignright, .alignleft{
 display:block;
 float:none;
 text-align:center;
 margin:0 auto 15px;
}

/************* ページリンク *************/
.pagelink {
 margin: 40px auto 0px;
 max-width: 280px;
}
.pagelink li.listlink {
 width: 160px;
 margin-left: -80px;
}
.pagelink li a {
 padding: 8px 0 8px;
}	
.pagelink li.oldpage { 
 width: 45px;
}
.pagelink li.oldpage a {
 height: 45px;
 width: 45px;
}
.pagelink li.newpage {
 width: 45px;
}
.pagelink li.newpage a {
 height: 45px;
 width: 45px;
}

}

/************共通テーブルスタイル********************/

.table_style01 th{
 background: #e60012;
 color: #fff;
 padding: 10px 20px 10px 20px;
 border: solid #fff;
 border-width: 0 1px 0 0;
}
.table_style01 th:last-child{
 border: none;
}
.table_style01 tr{
 border: solid #e60012;
 border-width: 0 1px 0 1px;
 position: relative;
}
.table_style01 td{
 padding: 10px 20px 10px 20px;
 border: solid #e60012;
 border-width: 0 1px 1px 0;
}
.table_style01 a{
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
}
.table_style02{
 width: 100%;
}
.table_style02 th{
 background: #f7f7f7;
 padding: 20px 30px 20px 30px;
 width: 17%;
}
.table_style02 td{
 padding: 20px 30px 20px 30px;
}
.table_style02 th,.table_style02 td{
 background-image: linear-gradient(to right, #7e7e7e, #7e7e7e 2px, transparent 2px, transparent 8px);
 background-size: 4px 1px;
 background-position: left bottom;
 background-repeat: repeat-x;
}
.table_style02 tr:first-child th,.table_style02 tr:first-child td{
 background-image: 
  linear-gradient(to right, #7e7e7e, #7e7e7e 2px, transparent 2px, transparent 8px),
  linear-gradient(to right, #7e7e7e, #7e7e7e 2px, transparent 2px, transparent 8px);
 background-size: 
  4px 1px,
  4px 1px;
 background-position: 
  left top,
  left bottom;
 background-repeat: 
  repeat-x,
  repeat-x;
}
.table_style03{
 width: 100%;
}
.table_style03 td{
 padding: 15px 0 15px 0;
 text-align: center;
 background-image: linear-gradient(to right, #7e7e7e, #7e7e7e 1px, transparent 1px, transparent 0px);
 background-size: 4px 1px;
 background-position: 
  left bottom;
 background-repeat: 
  repeat-x;
 background-color: #fff;
}
.table_style03 tr:last-child td{
 background-image: none;
}
.table_style03 th{
 padding: 15px 0 15px 0;
 text-align: center;
}
.table_style03_p01{
 background: #dddddd;
 border: solid #808080;
 border-width: 0 1px 0 0;
}
.table_style03_p02{
 background: #dddddd;
}
.table_style03 thead tr:nth-child(2),.table_style03 thead tr:first-child {
 background-image: none;
}
.table_style04{
 width: 100%;
}
.table_style04 th{
 padding: 15px 20px;
 text-align: center;
 background: #bd946f;
 color: #fff;
}
.table_style04 th:not(:last-child){
 border: 1px solid #fff;
 border-width: 0 1px 0 0;
}
.table_style04 td{
 padding: 15px 20px;
 text-align: center;
 background: #ebe0cd;
 color: #333;
}
.table_style04 td:not(:last-child){
 border: 1px solid #fff;
 border-width: 0 1px 0 0;
}
.table_style03 td.check{
 background-color: #f7f7f7;
 border: solid #808080;
 border-width: 0 1px 0 0;
}
.table_style03 td.check:nth-child(8){
 border-width: 0 0 0 0;
}
.sp_only{
 display: none;
}
.col1,.col3,.col5,.col7{
 width: 20%;
}
.col2,.col4,.col6,.col8{
 width: 5%;
}
/****************画面サイズが767px以下に適用　*************/

@media screen and (max-width : 767px){
 .table_style02 tr:first-child td {
    background-image: linear-gradient(to right, #7e7e7e, #7e7e7e 2px, transparent 2px, transparent 8px);
    background-size: 4px 1px;
    background-position: left bottom;
    background-repeat: repeat-x;
}
.table_style02 th, .table_style02 td {
  display: block;
 width: 100%;
 box-sizing: border-box;
 padding: 10px 5px;
}
.table_style04 th {
 font-size: 12px;
 font-size: 1.2rem;
 padding: 15px 5px;
}
.table_style04 td {
 font-size: 12px;
 font-size: 1.2rem;
 padding: 15px 10px;
}
}


/******共通チェックボックススタイル*****************/

input.check_style01[type=checkbox] {
  display: none;
}
.label_style01{
  position: relative;
  display: inline-block;
  padding: 0 0 0 20px;
  margin: 0 30px 0 0;
}
.label_style01:before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 10px;
  height: 10px;
  border: 2px solid #999999;
  border-radius: 50%;
}
.check_style01:checked  + .label_style01:before {
  background: #e60012;
}
.select_style01{
 font-size: 16px;
 font-size: 1.6rem;
 border: 2px solid #bd946f;
 display: block;
 width: 100%;
 padding: 15px 20px 15px 30px;
 border-radius: 10px;
 appearance: none;
 background: url("../img/common/arrow05.png") 92% 50% no-repeat #fff;
 color: #bd946f;
 letter-spacing: 1px;
 font-weight: 500;
}
.select_style01:hover{
 cursor: pointer;
}


/*********共通リストスタイル*****************************/

.list_style01{
 background: #fff;
 padding: 60px 100px 60px 100px;
}
.list_style01 li{
 position: relative;
 padding: 0 0 0 20px;
 font-weight: 500;
}
.list_style01 li:before{
 position: absolute;
 content: "";
 top: 10px;
 left: 0;
 width: 3px;
 height: 3px;
 border-radius: 50%;
 background: #333333;
}
.list_style01 li:not(:last-child){
 margin: 0 0 20px 0;
}
.list_style02{
 padding: 0 0 0 20px;
 margin: 20px 0 0 0;
}


/************* 画面サイズが1060px以下に適用　*************/
@media screen and (max-width : 1060px){
 .list_style01 {
  padding: 40px 40px 40px 40px;
}
}

/*画面サイズが767px以下に適用*/
@media screen and (max-width : 767px){
.list_style01 {
 padding: 40px 20px;
}
.list_style02 {
 padding: 0 0 0 0;
}
}	

.top_page .banner_image{
 margin: 0 !important;
}
.top_page .slick-dots{
    bottom: -60px !important;
}

/*画面サイズが767px以下に適用*/
@media screen and (max-width : 767px){
.top_page .slick-dots {
    bottom: -68px !important;
}
.top_page .slick-dots li{
    height: 10px !important;
}
}