/*	################################################################

	Author: 
	URL: 

	Project Name: 
	Version: 1.0
	URL: 
	
################################################################# */ 

/* ------------------------------------------
                  COMMON
------------------------------------------ */

body {
padding-top: 80px;
font:15px 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
color: #111;
line-height: 1.6;
}

a {
    color: #003429; /* color: #5F76A6; */
}

header {

}

.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin-bottom: 0;
padding: 1em 0;
border-radius: 0;
border-bottom: solid 1px #e9e9e9;
background: rgba(72,72,72,0.78); /* background: rgba(255,255,255,0.88); */
z-index: 1000;
transition :all 0.2s ease-in-out 0s;
}

.sticky {
padding: 0.25em 0;
background: rgba(72,72,72,0.78); /* background: rgba(255,255,255,0.98); */
}

.navbar h1 {
text-align: left;
}

.navbar h1 img {
transition :all 0.2s ease-in-out 0s;
}

.sticky h1 img {
transform :scale(0.8);
}

.navbar-header {
margin: 0;
}

.navbar-collapse {
padding-left: 0;
padding-right: 0;
}

.navbar-nav > li {
padding: 7px 0;
}

.navbar-nav > li > a {
padding: 7px 15px;
}

.navbar-nav li > a:hover {
background: #f1f1f1;
}

.navbar-nav li.active > a {
background: #f1f1f1;
color: #111;
}

.dropdown-menu {
max-height: 400px;
padding: 0;
overflow: auto;
}

.dropdown-menu > li > a {
padding: 5px 15px;
}

.dropdown-toggle i {
padding-left: 0.5em;
font-size: 72%;
}

ul.header-socialbtn {
float: right;
margin-bottom: 0;
padding-left: 1em;
}

ul.header-socialbtn li {
display: inline-block;
padding: 10px 0;
list-style: none;
line-height: 20px;
}

ul.header-socialbtn li a {
min-width: 30px;
display: inline-block;
padding: 5px 0;
color: #fff;
text-align: center;
}

ul.header-socialbtn li.googleplus a {
background: #DB4A39;
}

ul.header-socialbtn li.twitter a {
background: #00B6F1;
}

ul.header-socialbtn li.facebook a {
background: #3B599C;
}

footer {
padding: 15px 0;
background: #485d50;
font-size: 86%;
color: #fff;
}

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

#copyright a:hover {
text-decoration: none;
}

#footer-navi {
text-align: right;
}

#footer-navi li {
display: inline-block;
list-style: none;
}

#footer-navi li a {
display: inline-block;
padding: 0 0 0 10px;
color: #fff;
}

#footer-navi p.license a {
color: #fff;
text-decoration: underline;
}

#footer-navi p.license a:hover {
text-decoration: none;
}

/* ------------------------------------------
             CONTENT COMMON STYLES
------------------------------------------ */

#content {
padding: 2em 0;
}

#content article h1 {
margin: 0 0 15px 0;
font-size: 28px;
}

#content article h2 {
font-size: 25px;
}

#content article h3 {
font-size: 20px;
}

#content article h4 {
font-weight: bold;
}

#content article p {
margin-bottom: 1em;
}

#content article .row {
margin-bottom: 1em;
}

/* ------------------------------------------
                 LOWER CONTENT
------------------------------------------ */



#mainvisual-lower {
position: relative;
/* padding: 3.5em 0; */
padding: 5em 0; 
background: url(/akifukakusa.jp/youtube/baseimages/bg-top-main2.jpg) no-repeat center bottom;
background-size: cover;
color: #fff;
text-shadow: 0 1px 0px #000;
}
                      
#mainvisual-lower .overray {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(95,118,166,0.3);
}

#mainvisual-lower .row {
display: table;
width: 100%;
}

#mainvisual-lower .row .col-sm-12 {
display: table-cell;
width: 100%;
vertical-align: middle;
}

#mainvisual-lower h2 {
margin: 0;
font-size: 32px;
}

#mainvisual-lower h2 i {
padding-right: 10px;
font-size: 50px;
}

#localnavi {
background: #f6f6f6;
border-bottom: solid 1px #e9e9e9;
}

#localnavi nav {
border-left: solid 1px #e9e9e9;
}

#localnavi nav ul {
margin: 0;
padding: 0;
text-align: left;
}

#localnavi nav li {
display: inline-block;
list-style: none;
float: left;
}

#localnavi nav li a {
position: relative;
display: inline-block;
padding: 10.5px 1.5em;
border-right: solid 1px #e9e9e9;
}

#localnavi nav li.home a {
padding: 10.5px 1em 10.5px ;
}

#localnavi nav li a:hover {
background: #fff;
text-decoration: none;
}

#localnavi nav li span {
display: inline-block;
padding: 10.5px 1.5em;
background: #fff;
border-right: solid 1px #e9e9e9;
}

#localnavi nav li.pagetop span {
position: relative;
}

#localnavi nav li a:before {
border:11px solid transparent;
border-left-color:#f6f6f6;
border-right-width:0;
border-top-width: 23px;
border-bottom-width: 23px;
right:-10px;
content:"";
display:block;
top: 0;
position:absolute;
width:0;
z-index:1;
}

#localnavi nav li a:after {
border:11px solid transparent;
border-left-color:#e9e9e9;
border-right-width:0;
border-top-width: 23px;
border-bottom-width: 23px;
right:-11px;
content:"";
display:block;
top:0;
position:absolute;
width:0;
}

#localnavi nav li a:hover:before {
border-left-color:#fff;
}

#localnavi nav li.pagetop ul li {
display: block;
float: none;
}

#localnavi nav li.pagetop ul li a {
display: block;
border-right: none;
}

#localnavi nav li.pagetop ul li a:hover {
background: #f6f6f6;
}

#localnavi nav li.pagetop ul li.active a:hover {
background: #428bca;
}

#localnavi nav li.pagetop ul li a:before,
#localnavi nav li.pagetop ul li a:after {
display: none;
}

.breadcrumb {
background-color: #none;
border-radius: 0;
list-style: none outside none;
margin-bottom: 0;
padding: 0;
}

#blog-primary-content {
padding-left: 0;
}

#entry-list article {
margin-bottom: 3em;
padding-bottom: 3em;
border-bottom: solid 1px #e9e9e9;
}

#entry-list figure {
width: 300px;
float: right;
margin-left: 2em;
margin-bottom: 1em;
}

#entry-list figure img {
width: 100%;
border: solid 1px #e9e9e9;
}

.entry-meta {
margin-bottom: 1em;
font-size: 86%;
}

.entry-meta time {
display: inline-block;
margin-right: 0.5em;
padding: 0.2em 0.3em 0.2em 0.5em;
background: #f1f1f1;
}

.entry-meta time span {
display: inline-block;
}

.entry-meta time span.year {
padding-right: 0.3em;
}

.entry-meta time span.monthday {
padding: 0.2em 0.5em;
background: #fff;
}

.entry-meta .category {
padding: 0.5em 0.8em;
margin-right: 0.2em;
background: #88cfc5;
color: #fff;
}

.entry-excerpt {
margin-bottom: 1em;
}

.pagemore {
text-align: left;
}

#content #entry-list h1 {
margin-bottom: 15px;
font-size: 20px;
color: #111;
}

#sidebar nav {
margin-bottom: 2em;
padding-bottom: 2em;
border-bottom: solid 3px #e9e9e9;
}

#sidebar h1 {
margin: 0 0 20px 0;
font-size: 15px;
font-weight: bold;
}

#sidebar ul {
padding: 0;
margin-bottom: 0;
}

#sidebar ul li {
/* margin-bottom: 0.7em;
padding-bottom: 0.7em; */
list-style: none;
border-bottom: solid 1px #e9e9e9;
}

#sidebar ul li:last-of-type {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}

h1.page-title {
margin: 0 0 1em 0;
font-size: 32px;
}

/* ------------------------------------------
                 ENTRY DETAIL
------------------------------------------ */

#entry-detail figure {
margin-bottom: 2em;
}

#entry-detail img {
max-width: 100%;
}

.entry-social-buttons {
margin-top: 2em;
}

.entry-social-buttons ul {
padding-left: 0;
list-style: none;
}

.entry-social-buttons ul li {
display: inline-block;
margin-right: 0.7em;
vertical-align: top;
}

/* ------------------------------------------
                    BTN
------------------------------------------ */

.btn-primary {
background: #5F76A6;
}

.btn-primary:hover {
background: #738ABA;
border-color: #738ABA;
}

.btn-secondary {
background: #f1f1f1;
border-color: #e1e1e1;
}

.btn-secondary:hover {
background: #f9f9f9;
border-color: #e9e9e9;
}

.btn-info {
background: #60A79D;
border-color: #60A79D;
}

.btn-info:hover {
background: #74BBB1;
border-color: #74BBB1;
}

.btn-success {
background: #60A79D;
border-color: #60A79D;
}

.btn-success:hover {
background: #74BBB1;
border-color: #74BBB1;
}

/* ------------------------------------------
                    TOP
------------------------------------------ */

body#sitetop {
padding-top: 0;
}

#mainvisual {
width: 100%;
min-height: 300px;
padding: 8em 0 3em 0;
background: url(/akifukakusa.jp/youtube/baseimages/bg-top-main.jpg) no-repeat center bottom;
background-size: cover;
text-align: center;
/* border-bottom: solid 1px #e9e9e9; */
}

#mainvisual h2 {
margin: 0 0 20px 0;
}

#mainvisual #main-text {
margin-bottom: 2em;
}

#mainvisual .btn-group {
}

#mainvisual .btn-group .btn {
width: 300px;
}

#top-about {

}

#top-about .webpages {
padding: 3em 0;
border-bottom: solid 1px #f1f1f1;
}

#top-about .webpages:nth-child(even) {
background: #F5F7FA;
}

#top-about .webpages h3 {
margin: 0 0 15px 0;
text-align: center;
font-size: 40px;
}

#top-about .webpages p.webpage-lead {
margin-bottom: 2em;
text-align: center;
}

#top-about .webpages .col-sm-4 {
position: relative;
padding-bottom: 50px;
}

#top-about .webpages i {
padding-right: 0.2em;
}

#top-about .webpages .page-detail {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 0 15px;
text-align: center;
}

#top-about .webpages .page-detail .btn {
width: 100%;
}

#top-news {
padding: 3em 0;
/* background: #2E3B53; */
background: #819c92;  /* #819c92 */
color: #fff;
}

#top-news h3 {
font-size: 40px;
margin: 0 0 25px 0;
text-align: center;
}

#top-news a.col-sm-3 {
display: block;
width: 262.5px;
padding: 0;
margin: 0 15px 15px 15px;
background: #fff;
color: #111;
}

#top-news a:hover {
color: #5f76a6;
text-decoration: none;
}

#top-news figure {
display: block;
height: 150px; /* height: 150px; */
overflow: hidden;
}

#top-news figure.noimage {
height: 150px; /* height: 150px; */
background: #999;
text-align: center;
line-height: 150px; 
color: #fff;
font-size: 30px;
}

#top-news figure img {
width: 100%;
}

#top-news .entry-detail {
padding: 1em 0.5em;
height:116px;
}

#top-news h1 {
margin: 0 0 0.5em 0;
font-size: 110%;
}

#top-news p {
margin: 0;
}

#top-news p.entry-excerpt {
font-size: 80%;
}

#top-news .top-newslist {
margin-top: 2em;
text-align: center;
}

/* ------------------------------------------
               STYLE FOR TABLET
------------------------------------------ */

@media screen and (max-width:767px){

#top-news figure {
display: block;
height: auto;
overflow: hidden;
}

#top-news figure.noimage {
height: auto;
background: #999;
text-align: center;
line-height: 160px; 
color: #fff;
font-size: 30px;
}

#top-news figure img {
width: 100%;
}

img {
max-width: 50%;
}

header {
margin-bottom: 5px;
}

.container > .navbar-header {
position: relative;
width: 100%;
margin: 0;
text-align: center;
}

.navbar-nav {
margin: 0;
border: solid 1px #f1f1f1;
}

.navbar-nav > li {
padding: 0;
}

button.navbar-toggle {
position: absolute;
right: 0;
top: 0;
padding: 8px 11px;
margin-right: 0;
background: #f6f6f6;
border: solid 1px #f1f1f1;
border-radius: 3px;
font-size: 15px;
}

.container>.navbar-collapse {
margin: 0;
}

ul.header-socialbtn {
float: none;
margin: 0;
padding: 0;
text-align: center;
}

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
margin-bottom: 1em;
}

section .col-sm-1:last-of-type, section .col-sm-2:last-of-type, section .col-sm-3:last-of-type, section .col-sm-4:last-of-type, section .col-sm-5:last-of-type, section .col-sm-6:last-of-type, section .col-sm-7:last-of-type, section .col-sm-8:last-of-type, section .col-sm-9:last-of-type, section .col-sm-10:last-of-type, section .col-sm-11:last-of-type, section .col-sm-12:last-of-type {
margin-bottom: 1em;
}

#footer-logoarea {
text-align: center;
}

#footer-navi ul.pull-right {
float: none !important;
padding: 0;
text-align: center;
}

footer .col-sm-6 {
margin-bottom: 0;
}

#mainvisual .btn-group {
display: block;
text-align: center;
}

#mainvisual .btn-group .btn {
display: inline-block;
width: 45%;
float: none;
margin-bottom: 0.5em;
border-radius: 3px;
}

#mainvisual .btn-group .btn:last-of-type {
margin: 0;
}

#top-news a.col-sm-3 {
width: 90%;
margin: 0 auto 2em auto;
}

#sidebar {
width: 100%;
}

#sidebar h1 {
padding: 1em 0.7em;
background: #f6f6f6;
}

#entry-list figure {
width: 40%;
}

.dropdown-menu {
max-height: 200px;
}

}

/* ------------------------------------------
                  for sp
------------------------------------------ */

@media(max-width:480px){
/* -------------
#entry-list figure {
display: none;
}  ---------- */

#entry-list figure img {
    width: 100%;
}
.s80 {
  font-size: 80%;
}
/* ---------------------------------------
             追加
------------------------------------------ */
/* ----------両先端を尖らせた見出し------- */
.midashi1 h1 {
  position: relative;
  padding: 5px 26px 5px 42px;
  background: #fff0d9;
  font-size: 18px;
  color: #2d2d2d;
  margin-left: -33px;
  line-height: 1.3;
  border-bottom: solid 3px orange;
  z-index:-2;
}

.midashi1 h1:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index: -1;
}

.midashi1 h1:after {
  position: absolute;
  content: '';
  right: -3px;
  top: -7px;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 40px transparent;
  border-bottom: solid 79px white;
  z-index: -1;
}
/* ------途中で色の変わる下線------------- */
.midashi2 h1 {
  font-size: 150%; 
  border-bottom: solid 3px skyblue;
  position: relative;
}

.midashi2 h1:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #ffc778;
  bottom: -3px;
  width: 30%;
}
/* ---------タグ風------------ */
.midashi3 h1 {
  font-size: 150%; 
  color: #505050;/*文字色*/
  padding: 0.1em 1em 0.1em 0.1em/*文字周りの余白 0.5em; */
  display: inline-block;/*おまじない*/
  line-height: 1.3;/*行高*/
  background: #dbebf8;/*背景色*/
  vertical-align: middle;
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く  25px 0px 0px 25px; */
}

.midashi3 h1:before {
  content: '●';
  color: white;
  margin-right: 8px;
}

/* ---------　dot line ------------------- */
.dotblue {
   border-bottom: 1px dotted blue;
   margin: 0 20 px;
}
.dotred {
   border-bottom: 1px dotted red;
   margin: 0 20 px;
}
.dotgreen {
   border-bottom: 1px dotted green;
   margin: 0 20 px;
}
.dotgrey {
   border-bottom: 1px dotted #888;
   margin: 0 20 px;
}
.dotorange {
   border-bottom: 1px dotted orange;
   margin: 0 20 px;
}

/* ------------  submit botton color ----- */
.btn-orange {
	padding: 15px 80px;
    float: inherit;
    background: #FF4F02;
    float: right;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 0px;
    border: 0px;
    width: 512px;
    height: 50px;
    padding-top: 15px;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
}


/* ---------------- button ----------------- */
  .input-group button {
    width: 212px;
    height: 65px;
    border: none;
    border-radius: 0px;
    background: #7EC3BB;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
    }
/* -------------------上下線付きBUTTON----------------------- */
/* <a href="#" class="btn-horizontal-border">BUTTON</a> */
.btn-horizontal-border {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 12px 0 4px; /* FONTの大きさにより上下の線間隔調整　*/
  text-decoration: none;
  color: #67c5ff;
  transition: .4s;
}

.btn-horizontal-border:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 4px;
  top:100%;
  left: 0;
  border-radius: 3px;
  background:#67c5ff;
  transition: .2s;
}

.btn-horizontal-border:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 4px;
  top:0;
  left: 0;
  border-radius: 3px;
  background:#67c5ff;
  transition: .2s;
}

.btn-horizontal-border:hover:before {
  top: -webkit-calc(100% - 3px);
  top: calc(100% - 3px);
}

.btn-horizontal-border:hover:after {
  top: 3px;
}

/* --------  イメージ縦横比 4:3  ----------------- */
#imgbox{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 75% 0 0;
}

#imgbox .img-inner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --------- Q&A ----------- */
img.markqa {
float: left; 
margin: 0 20px 50px 0;
}

/* -------------------------------------------------
 BOX
---------------------------------------------------- */
.box {
	margin: 2px;
	padding: 5px;
　　/* color: white; */
	background: #fff;
	/* font-size: 11px; */
	line-height: 1.4;
    border : solid 1px #7b0000;
	/* float: left; */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; 
}

.box dt{ padding: 0 10px;
}
.box img {
  display: block;
  width: 100%;
}

/* ------------------------------------------------ */
.box1 {
	margin: 10px 0px;
	padding: 5px;
	background: #fff;
	/* font-size: 11px; */
	line-height: 1.4;
    border : solid 1px #c30474;
	/* float: left; */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; 
}
.box1 img {
  display: block;
  width: 100%;
}
.box2 {
	margin: 10px 0px;
	padding: 5px;
	background: whiteSmoke;
	/* font-size: 11px; */
	line-height: 1.3;
    border : solid 1px #0196b1;
	/* float: left; */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; 
}
.box3 {
	margin: 2px;
	padding: 5px;
	background: #4f4f4f;
	/* font-size: 11px; */
	line-height: 1.4;
	/* float: left; */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; 
}
.box4 {
	margin: 2px;
	padding: 5px;
/*　　background: #d675ac;　*/
	background: #8dd4ec;
	/* font-size: 11px; */
	line-height: 1.4;
	/* float: left; */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; 
}
.box4 a{
color: #fff;
text-decoration:none;
}
.box5 {
	margin: 5px;
	padding: 10px;
	line-height: 1.4;
    border: 1px dotted #683d1d;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; 
}
/* ---------文字を丸ボックスで囲む----------------- */
.boxA {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 3px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.boxA p {
    margin: 0; 
    padding: 0;
}
/* --------------枠の途中にタイトル
<div class="boxB">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>
------------------- */
.boxB {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.boxB .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.boxB p {
    margin: 0; 
    padding: 0;
}
/* ---------文字の上下にだけ線----------------- */
.boxC {
    padding: 8px 19px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #cde4ff;
    border-top: solid 5px #5989cf;
    border-bottom: solid 5px #5989cf;
}
.boxC p {
    margin: 0; 
    padding: 0;
}
/* ---------文字を破線丸ボックスで囲む----------------- */
.boxD {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #f0f7ff;
    border: dashed 2px #5b8bd0;/*点線*/
}
.boxD p {
    margin: 0; 
    padding: 0;
}
/* --------- 枠線ではなく影によりボックス領域が分かるように ----------------- */
.boxE {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #5d627b;
    background: white;
    border-top: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.boxE p {
    margin: 0; 
    padding: 0;
}
/* -------------左にだけ太線--------------- */
.boxF {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;
    border-left: solid 10px #ffc06e;
}
.boxF p {
    margin: 0; 
    padding: 0;
}
/* ---------------二重線の枠----------------- */
.boxG {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #4ec4d3;
}
.boxG p {
    margin: 0; 
    padding: 0;
}
/* -----------------左右二重線------------------ */
.boxH {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #474747;
    background: whitesmoke;/*背景色*/
    border-left: double 7px #4ec4d3;/*左線*/
    border-right: double 7px #4ec4d3;/*右線*/
}
.boxH p {
    margin: 0; 
    padding: 0;
}
/* ------------上にだけ太線---------------- */
.boxI {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #ff7d6e;
    background: #ffebe9;
    border-top: solid 10px #ff7d6e;
}
.boxI p {
    margin: 0; 
    padding: 0;
}
/* ----------------上にだけ太線 影をつけた場合----------------- */
.boxJ {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #00BCD4;
    background: #e4fcff;/*背景色*/
    border-top: solid 6px #1dc1d6;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.boxJ p {
    margin: 0; 
    padding: 0;
}
/* ------------ステッチを白に--------------- */
.boxK h1 {
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
}
/* ------------ステッチ 黒--------------- */
.boxL h1 {
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 1px #96c2fe;
  padding: 0.2em 0.5em;
  color: #454545;
}
/* -------------背景色＋下線------------------ */
.kasen h1 {
  padding: 0.5em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  background: #eaf3ff;/*背景色*/
  border-bottom: solid 3px #516ab6;/*下線*/
}

/*--- tooltip ----- */
div.tooltip {  
	    width: 600px;  
	    position: absolute;  
	    left: -9999px;  
	    background: #EEE;  
	    padding: 5px;  
	    border: 1px solid #AAA;  
	}  
	  
	div.tooltip p{  
	    color: #FFF;  
        line-height: 1.5;
	    background: #484848;  
	    padding: 8px 10px;  
	}  

/* ----  縦横比固定   -------- */
.boxHW {
    position: relative;
    width: 100%;
   /*  background: #444; */
}
.boxHW:before {
    content:"";
    display: block;
    padding-top: 120%; /* ここを変えると比率が変わる */
}
.innerHW {
    position: absolute;
    top: 0; left: 0;
    bottom: 0;
    right: 0;
/*    width: 100%;
    height: 100%; */
}

/*-------------- pdf -------------------- */
a[href$=".pdf"]:after {
    content:" ";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("../img/share/Adobe_PDF_file_icon_24x24.png") no-repeat;
}

/* ------------------ */
.white a{
padding: 5px;0 0 0;
color: #fff;
}
.contentA {
   line-height: 1.4em;
}
/* ------------ block要素縦比率指定 ------------- */
.wrapper-img {
    position: relative;
    width: 100%;
}
.wrapper-img:before {
    content:"";
    display: block;
    padding-top: 75%; /* 高さを幅の75%に固定 */
}
.content-img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.content-img img {
  width: 100%;
  object-fit: cover;
}

/* ----------------- その他 ---------------- */

.hantoumei {
   background-color: rgba(0,0,0,0.5);
　 padding: 20px;
}
/* --- Youtube スマホ対応   --- */

.video-container {
position: relative;
padding-bottom: 56.25%;
/* padding-top: 30px; */
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100% ;
height: 100% ;
}

/* Youtube スマホ対応２　*/
.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
/* --------------YouTube表示用---------------- */
iframe.youtube-16-9 {
width: 100%;
height: auto;
aspect-ratio: >16 / 9;
max-width: 700px;
display: block;
margin: auto;
}

/* MAP */
iframe.map {
    width: 100%;
/*    height: 600px; */
}
/* -----------上部を開ける-------------- */
#gaiyou,#map {
   margin-top:-90px;
  padding-top:90px;
} 
/* -----------Q & A icon-------------- */
.question-icon {
    font-family: HiraginoSans-W4, sans-serif;
    font-style: normal;
    display: inline-block;
    width: 32px;
    height: 32px;

    color: #fff;
    border-radius: 100%;
    position: relative;
    margin-right: 15px;
    font-weight: normal;
    font-size: 21px;
    text-align: center;
    line-height: 32px;

    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: salmon;
}
.anser-icon {
    font-family: HiraginoSans-W4, sans-serif;
    font-style: normal;
    display: inline-block;
    width: 32px;
    height: 32px;

    color: #fff;
    border-radius: 100%;
    position: relative;
    margin-right: 15px;
    font-weight: normal;
    font-size: 21px;
    text-align: center;
    line-height: 32px;

    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: blue;
}
/* -----------横並び------------ */
.box_left {
    color: #FFF;
    width:100px;
    height:100px;
    margin-left:10px;
    float:left;
    background-color:#F00;
}
.box_wrap {
    width:500px;
    height:auto;
    border:1px solid #000;
}
.clearfix:after {
  display: block;
  clear: both;
  content: "";
}
/* -------VIDEO-----------------  */
video {
  max-width: 100%;/* はみ出ないように */
}
/* p {margin: 0 0 5px;} */

/* --------------- 明朝 -------------　*/
.mincho p, .mincho h2 {
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
/*
.font-mincho, .alert {
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
} */
.font-mincho {
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.topcatalog a{
   color: #990000;
   font-size: 130%;
}

/* ------ Titlebar ------ */
.bar01 {
   padding: 10px 15px;
}
/* ------ clear ---------- */
.clear {
   clear: both;
}
/* --------------- table ---------------- */
table.t01 {
  width: 100%;
  border-spacing: 0;
}

table.t01 th{
  border-bottom: solid 2px #fb5144;
  padding: 10px 0;
}

table.t01 td{
  border-bottom: solid 2px #ddd;
  text-align: leftr;
  padding: 10px 0;
}
/* ------------- TMP -------------- */
.tmp {
 background-color: rgba(105,105,105,0.5);
}


/* -------------上を空ける---------- */
.t20 {
 margin-top: 20px;
}
.t30 {
 margin-top: 30px;
}
.t40 {
 margin-top: 40px;
}
.t50 {
 margin-top: 50px;
}
/* -------------下を空ける---------- */
.b20 {
 padding-bottom: 20px;
}
.b30 {
 padding-bottom: 30px;
}
.b40 {
 padding-bottom: 40px;
}
.b50 {
 padding-bottom: 50px;
}
/* -------------上下を空ける---------- */
.tb20 {
 margin: 20px 0 0 20px;
}
.tb30 {
 margin: 30px 0 0 30px;
}
.tb40 {
 margin: 40px 0 0 40px;
}
.tb50 {
 margin: 50px 0 0 50px;
}
/* ------footer 幅修正----------------- */
.col-lg-4a {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
/* -------------Page top arrow--------  */
html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop_arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

/* ---------------ハンバーガーメニュー------------------- */
.c-header {
  align-items: center;
  background-color: #eeeeee; /* カスタマイズしてください */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem; /* カスタマイズしてください */
  width: 100%;
}

.c-header__logo {
  color: #000; /* カスタマイズしてください */
  min-width: 80px; /* カスタマイズしてください */
  text-decoration: none;
}

.c-header__list {
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding: 0;
}

.c-header__list-item {
  list-style: none;
  text-decoration: none;
}

.c-header__list-link {
  color: #000; /* カスタマイズしてください */
  display: block;
  margin-right: 20px; /* カスタマイズしてください */
  text-decoration: none;
  padding: 10px 0px; /* カスタマイズしてください */
}

.c-header__list-link:hover {
  filter: opacity(0.6); /* カスタマイズしてください */
}

.c-hamburger-menu {
  position: relative;
}

@media screen and (max-width: 750px) {
  .c-hamburger-menu__list {
    background-color: #eeeeee; /* カスタマイズしてください */
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    left: 0;
    padding: 2rem; /* カスタマイズしてください */
    position: absolute;
    transform: translateX(-100%);
    transition: 0.3s; /* カスタマイズしてください */
    top: 100%;
    width: 100%;
  }

  #hamburger:checked ~ .c-hamburger-menu__list {
    transform: translateX(0%);
    transition: 0.3s;
  }
}

.c-hamburger-menu__input {
  display: none;
}

.c-hamburger-menu__bg {
  background-color: #000; /* カスタマイズしてください */
  cursor: pointer;
  display: none;
  height: 100vh;
  left: 0;
  opacity: 0.4; /* カスタマイズしてください */
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

#hamburger:checked ~ .c-hamburger-menu__bg {
  display: block;
}

.c-hamburger-menu__button {
  display: none;
}

@media screen and (max-width: 750px) {
  .c-hamburger-menu__button {
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px; /* カスタマイズしてください */
    height: 32px; /* カスタマイズしてください */
    justify-content: center;
    width: 32px; /* カスタマイズしてください */
  }
}

.c-hamburger-menu__button-mark {
  background-color: #000; /* カスタマイズしてください */
  display: block;
  height: 1px; /* カスタマイズしてください */
  transition: 0.3s; /* カスタマイズしてください */
  width: 20px; /* カスタマイズしてください */
}

@media screen and (max-width: 750px) {
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(1) {
    transform: translate(2px, 1px) rotate(45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(2) {
    opacity: 0;
  }
  #hamburger:checked
    ~ .c-hamburger-menu__button
    .c-hamburger-menu__button-mark:nth-of-type(3) {
    transform: translate(2px, 3px) rotate(-45deg); /* カスタマイズしてください */
    transform-origin: 0%; /* カスタマイズしてください */
  }
}
/* -----------Font size--------------------------- */
.fs60 {
  font-size: 60%;
}
.fs70 {
  font-size: 70%;
}
.fs80 {
  font-size: 80%;
}
.fs90 {
  font-size: 90%;
}
.fs110 {
  font-size: 110%;
}
.fs120 {
  font-size: 120%;
}
.fs130 {
  font-size: 130%;
}
.fs140 {
  font-size: 140%;
}
.fs150 {
  font-size: 150%;
}
.fs160 {
  font-size: 160%;
}
.fs170 {
  font-size: 170%;
}
.fs180 {
  font-size: 180%;
}
/* ------------------------------------------------ */

.youtube-box {
  width: 100%;       /* 親要素（画面幅など）に対して100%の幅にする */
  max-width: 300px;  /* ただし、最大幅は800pxまで（ここをお好みのサイズに変更してください） */
  margin: 0 auto;    /* 中央寄せにする場合 */
  aspect-ratio: 16 / 9; /* 縦横比をYouTube標準の16:9に固定 */
}

/* 中のiframe（動画本体）の設定 */
.youtube-box iframe {
  width: 100%;       /* 枠の幅いっぱいに広げる */
  height: 100%;      /* 枠の高さいっぱいに広げる */
}