@charset "utf-8";

/* 下層ページ */
/* ************************************************ 
*	ヘッダー
* ************************************************ */	
.header-img {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 300px;
  background: url("../images/header_bg.svg") center;
  background-size: cover;
  position: relative;
  z-index: 1;
}


/* ************************************************ 
*	パンくずリスト
* ************************************************ */	
.breadcrumbs {
width: 90%;
max-width: 1200px;
margin: auto; 
padding: 20px 0;
text-align:left;
font-size: 90%;
overflow: hidden;
color: #333;
}
.breadcrumbs a{
color: #333;
text-decoration: underline;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
.breadcrumbs a:hover{
color: #000;
text-decoration: none;
}


/* ************************************************ 
*	タイトル共通
* ************************************************ */	
.title-box {
margin: 50px auto 50px auto;
text-align: center;
}
.pagetitle {
margin: 0;
padding: 0;
font-size: min(3vw,30px);
display: inline;
letter-spacing: 0.05em;
position: relative;
}
.pagetitle-en {
margin: 0;
padding: 0;
font-size: min(4vw,40px);
display: inline;
letter-spacing: 0.05em;
position: relative;
}
.pagetitle::after,
.pagetitle-en::after {
  position: absolute;
  bottom: -15px;
  left: 50%;
  width: 60px;
  height: 4px;
  content: '';
  background-color: #ffcd4c;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}


/* ************************************************ 
*	下層ページ　サイドバー固定
* ************************************************ */	
.page-inner {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.main-content {
width: 75%;
margin: 0 5% 0 0; 
padding: 0 0 100px 0;
}
.main-content .section-box{
margin: 0 0 100px 0; 
padding: 0;
}
.sidebar-bg {
width: 20%;
background-color: #efefef;
}
.sidebar__inner {
width: 100%;
margin: 0; 
padding: 0;
}
.sidebar__inner ul{
margin: 0;
padding: 0;
border-top: 1px solid #999;
counter-reset:list;
list-style-type:none;
}
.sidebar__inner ul li{
position:relative;
padding: 0 0 0 0;
margin: 0 0 0 0;
line-height: 30px;
border-bottom: 1px solid #999;
}
.sidebar__inner ul li a{
font-size:15px;
color: #333;
padding: 10px 0 10px 25px;
display: block;
text-decoration: none;
}
.sidebar__inner ul > li.current > a,
.sidebar__inner ul > li > a:hover {
color: #fff;
background-color: #333;
text-decoration: none;
}
.sidebar__inner ul li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #333;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.sidebar__inner ul > li.current > a::before,
.sidebar__inner ul li a:hover::before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 10px;
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


/* ************************************************ 
*	下層ページ　見出し
* ************************************************ */	
.page-inner .main-content h3{
font-size: min(2.4vw,24px);
margin: 0 0 50px 0;
padding: 20px 0 18px 15px;
letter-spacing: 0.05em;
font-weight: 700;
position: relative;
display: block;
border-top: 1px solid #ffcd4c;
background: linear-gradient(
    -45deg,
    #efefef 25%, #fff 25%,
    #fff 50%, #efefef 50%,
    #efefef 75%, #fff 75%,
    #fff
  );
background-size: 12px 12px;
}
.page-inner .main-content h4{
font-size: min(1.8vw,18px);
margin: 0 0 30px 0;
padding: 0 0 0 40px;
letter-spacing: 0.05em;
font-weight: 500;
position: relative;
display: block;
}
.page-inner .main-content h4:before {
position: absolute;
top: 50%;
left: 0;
width: 30px;
height: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
content: '';
background-color: #ffcd4c;
}

.page-inner .main-content h5 {
font-size: min(2.1vw,21px);
  position: relative;
  padding: 0 0 15px 0;
  margin: 0 0 10px 0;
  font-weight: 500;
  display: block;
}
.page-inner .main-content h5::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #ffcd4c, #ffcd4c 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #ffcd4c, #ffcd4c 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.page-inner .main-content p{
font-size: min(1.6vw,16px);
line-height: 250%;
}


/* ************************************************ 
*	ダウンロード
* ************************************************ */	
ul.dl-list { margin: 0 0 0 0; }
ul.dl-list li a {
color: #333;
text-decoration: none;
}
ul.dl-list li a:hover {
color: #000;
text-decoration: underline;
}

ul.dl-list li.pdf,
ul.dl-list li.word,
ul.dl-list li.excel{
font-size: 110%;
display: block;
position: relative;
margin: 0 0 0 0;
padding: 10px 10px 10px 40px;
background-color: #efefef;
background-position: 5px center;
background-repeat: no-repeat;
background-size: auto 25px;
line-height: 150%;
}
ul.dl-list li.pdf{ background-image: url("../images/pdf_icon.png"); }
ul.dl-list li.word{ background-image: url("../images/word_icon.png"); }
ul.dl-list li.excel{ background-image: url("../images/excel_icon.png"); }



/* ************************************************ 
*   レスポンシブ
* ************************************************ */
/* PC 画面の横幅が960px以上 */
@media only screen and (min-width: 960px){
#anq1,
#anq2,
#anq3,
#anq4,
#anq5,
#anq6,
#anq7,
#anq8,
#anq9,
#anq10 {
margin-top: -100px;
padding-top: 100px;
}
}

/* Tablet (Portrait) 画面の横幅が768px〜959pxまで */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.header-img { height: 150px; }
.main-content {
width: 70%;
padding: 0 0 50px 0;
}
.main-content .section-box{ margin: 0 0 50px 0; }
.sidebar-bg { width: 25%; }
.sidebar__inner ul li a{
font-size:13px;
padding: 10px 0 10px 20px;
line-height: 150%;
}
.page-inner .main-content h3{
margin: 0 0 30px 0;
padding: 15px 0 13px 10px;
}
.page-inner .main-content h4{ margin: 0 0 20px 0; }
.page-inner .main-content p{ line-height: 200%; }
}

/* Mobile (Portrait) 画面の横幅が767pxまで */
@media only screen and (max-width: 767px) {
.header-img { height: 100px; }
.breadcrumbs { display: none; }
.title-box { margin: 0 auto 30px auto; }
.pagetitle { font-size: 5.5vw; }
.pagetitle-en { font-size: 7.5vw; }

.main-content {
width: 100%;
margin: 0 0 0 0;
padding: 0 0 50px 0;
}
.main-content .section-box{ margin: 0 0 75px 0; }
.sidebar-bg { width: 100%; }
.sidebar__inner ul li a{
font-size:4vw;
padding: 10px 0 10px 25px;
}
.page-inner .main-content h3 {
margin: 0 0 30px 0;
padding: 15px 0 13px 10px;
font-size: 5.5vw;
}
.page-inner .main-content h4 {
margin: 0 0 20px 0;
font-size: 4.5vw;
}
.page-inner .main-content h5 { font-size: 5vw; }
.page-inner .main-content p { font-size: 4.5vw; }

#anq1,
#anq2,
#anq3,
#anq4,
#anq5,
#anq6,
#anq7,
#anq8,
#anq9,
#anq10 {
margin-top: 0;
padding-top: 0;
}
}