@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
  font-size: 14px;
  line-height: 1.8;
  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans JP', "ヒラギノ角ゴ ProN W3", 'ヒラギノ角ゴ W3', "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  color: #333;
}

h1, h2, h3, h4 {
  line-height: 1.5;
}


h2, h3, h4 {
  color: #302833;
}


.heading-title {
  font-size: 22px;
  text-align: center;
  margin-bottom: 0.5em;
}

a {padding: 0px  5px;
  color: #003f8e;
  text-decoration: none;
  transition: opacity 0.3s;
}

a:hover {
  opacity: 0.8;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

ul,ol {
  padding: 0;
  list-style: none;
}

hr {
  padding: 0;
  margin: 0;
}




section {
  max-width: 1140px;
  padding: 0 15px;
  margin: 0 auto ;
}


article {
  max-width: 1140px;
  padding: 0 15px;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {

h2 {padding-top: 30px;
	
}

h3 {padding-top: 30px;
	
}


h4 {padding-top: 20px;
	
}

h5 {padding-top: 20px;
	
}


}
  




@media screen and (min-width: 768px) {
  .heading-title {
    font-size: 22px;
  }

}
  



@media screen and (min-width: 992px) {
  body {
    font-size: 16px;
  }
  .heading-title {
    font-size: 26px;
  }
}

/*-------------------------------------------
 ヘッダー
-------------------------------------------*/
header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px 15px 10px;
  position: relative;
  z-index: 100;
}

.header-button {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  border: none;
  width: 75px;
  height: 75px;
  background-color: transparent;
  z-index: 100;
}

.header-button .icon {
  display: block;
  position: relative;
  top: 0;
  margin: 0 auto;
  width: 24px;
  height: 2px;
  background-color: #333;
  transition: .3s ease;
}

.header-button .icon:before, .header-button .icon:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  transition: all .3s;
  background-color: #333;
}

.header-button .icon:before {
  top: -8px;
}

.header-button .icon:after {
  top: 8px;
}

.header-gnav {
  position: fixed;
  right: 0;
  top: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateX(100%);
  transition: .3s ease;
}

.header-gnav ul {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.header-gnav a {
  color: #666;
  font-weight: bold;
  font-size: 18px;
  display: block;
  padding: 0.8em;
}

.open .header-button .icon {
  background-color: transparent;
}

.open .header-button .icon:before, .open .header-button .icon:after {
  top: 0;
}

.open .header-button .icon:before {
  transform: rotate(45deg);
}

.open .header-button .icon:after {
  transform: rotate(-45deg);
}

.open .header-gnav {
  transform: translateX(0);
}

.top .icon {
  background-color: #fff;
}

.top .icon:before, .top .icon:after {
  background-color: #fff;
}

.top.open .icon {
  background-color: transparent;
}

.top.open .icon:before, .top.open .icon:after {
  background-color: #666;
}


@media screen and (min-width: 768px) {
  header {
    align-items: center;
  }
  .header-button {
    display: none;
  }
  .header-gnav {
    margin-right: -0.8em;
    transform: translateX(0);
    position: relative;
    background: none;
  }
  .header-gnav ul {
    flex-direction: row;
    justify-content: flex-end;
  }
}

@media screen and (min-width: 992px) {
  header {
    padding-top: 30px;
  }
  header .header-logo {
    flex: none;
  }
  header .header-logo img {
    width: 360px;
  }
}

footer {
  margin: 70px 0px 0px 0px;
  text-align: center;
}


/*-------------------------------------------
フッター
-------------------------------------------*/

/* フッター全体 */
.footer {
  padding: 40px 0 30px;
  color: #fff;
  text-align: center;
  background-color: #302833;
}

.footer h4{
  color: #fff;
}

/* フッターロゴ */
.footer-logo {
  margin-bottom: 10px;
}

/* フッターロゴ */
.footer a {
  color: #6699cc;
}

/* 連絡先 */
.footer-address {
  margin: 10px 0;
}

/* SNSのリンクボタン */
.footer-sns {
  margin: 20px 0;
  text-align: center; /* 中身を左右中央揃えで配置 */
}
.footer-sns a {
/* インラインの性質を保ちながら、ブロックレベルの性質を加えている。横並びに配置しながら、外余白を指定 */
  display: inline-block;
  margin: 0 5px;
}
.footer-sns img {
  vertical-align: middle; /* 垂直方向中央揃えで配置*/
}

/* コピーライト */
.copyright {
  margin: 0;
}
.copyright small {
  font-size: 11px;
}

/*-------------------------------------------
 メインビジュアル　TOP
-------------------------------------------*/
.hero {
  background: url("../img//photo/megane1900.jpg") no-repeat center center/cover;
  max-width: 1300px;
  height: 420px;
  margin: -70px auto 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  z-index: 10;
}

.hero h1 {
  font-size: 50px;
  letter-spacing: 0.03em;
  margin-top: 0;
  color: #333;
}

.hero p {
  font-size: 16px;
  color: #000;
  line-height: 1.5;
  font-weight: nomal;
  letter-spacing: 0.01em;
  margin-top: 0;
}

@media screen and (min-width: 992px) {
  .hero {
    height: 600px;
  }
  .hero h1 {
    font-size: 80px;
    letter-spacing: 0.05em;
    margin-bottom: 0.25em;
  }
  .hero p {
    font-size: 24px;
    letter-spacing: 0.04em;
  }
}

@media screen and (min-width: 768px) {
  .hero {
    margin-top: 0;
  }
}


/*-------------------------------------------
 メインビジュアル　メガネ
-------------------------------------------*/
.hero4 {
  background: url("../img/sam/kurobuchi.top2.jpg") no-repeat center center/cover;
  max-width: 1300px;
  height: 420px;
  margin: -70px auto 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  z-index: 10;
}

.hero4 h1 {
  font-size: 40px;
  letter-spacing: 0.03em;
  margin-top: 0;
  color: #666;
}

.hero4 p {
  font-size: 16px;
  color: #fff;
  line-height: 1.5;
  font-weight: nomal;
  letter-spacing: 0.01em;
  margin-top: 0;
}

@media screen and (min-width: 992px) {
  .hero4 {
    height: 600px;
  }
  .hero4 h1 {
    font-size: 80px;
    letter-spacing: 0.05em;
    margin-bottom: 0.25em;
  }
  .hero4 p {
    font-size: 24px;
    letter-spacing: 0.04em;
  }
}

@media screen and (min-width: 768px) {
  .hero4 {
    margin-top: 0;
  }
}



/*-------------------------------------------
 メインビジュアル　カメラ
-------------------------------------------*/
.hero2 {
  background: url("../img//photo/kamera1900.jpg") no-repeat center center/cover;
  max-width: 1300px;
  height: 420px;
  margin: -70px auto 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  z-index: 10;
}

.hero2 h1 {
  font-size: 31px;
  letter-spacing: 0.03em;
  margin-top: 0;
  color: #3e62ad;
}

.hero2 p {
  font-size: 16px;
  color: #3e62ad;
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: 0.01em;
  margin-top: 0;
}

@media screen and (min-width: 992px) {
  .hero2 {
    height: 600px;
  }
  .hero2 h1 {
    font-size: 60px;
    letter-spacing: 0.05em;
    margin-bottom: 0.25em;
  }
  .hero2 p {
    font-size: 24px;
    letter-spacing: 0.04em;
  }
}

@media screen and (min-width: 768px) {
  .hero2 {
    margin-top: 0;
  }
}

/*-------------------------------------------
 メインビジュアル　黒縁うさぎ
-------------------------------------------*/
.hero3 {
  background: url("../img//photo/kurobuchi1900.jpg") no-repeat center center/cover;
  max-width: 1300px;
  height: 420px;
  margin: -70px auto 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  z-index: 10;
}

.hero3 h1 {
  font-size: 31px;
  letter-spacing: 0.03em;
  margin-top: 0;
  color: #fff;
}

.hero3 p {
  font-size: 16px;
  color: #fff;
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: 0.01em;
  margin-top: 0;
}

@media screen and (min-width: 992px) {
  .hero3 {
    height: 600px;
  }
  .hero3 h1 {
    font-size: 60px;
    letter-spacing: 0.05em;
    margin-bottom: 0.25em;
  }
  .hero3 p {
    font-size: 24px;
    letter-spacing: 0.04em;
  }
}

@media screen and (min-width: 768px) {
  .hero3 {
    margin-top: 0;
  }
}




/*-------------------------------------------
 フィーチャー・リスト
-------------------------------------------*/
.top-feature {
  text-align: center;
  position: relative;
  z-index: 1;
}

.top-feature .top-feature_box {
  padding: 0 30px 20px;
}

.top-feature h2 {
  font-size: 22px;
  margin-bottom: 0.5em;
}

.top-feature h3 {
  font-size: 20px;
  margin-bottom: 0.5em;
}


.top-feature p {
  text-align: left;
}

.top-feature a {
  padding-bottom: 0.2em;
  border-bottom: 2px solid #003f8e;
  font-size: 18px;
}

.top-list {
  display: flex;
  flex-wrap: wrap;
  margin:  0px　-10px;
}



.top-list li {
  width: 100%;
  padding: 0 10px;
  margin-bottom: 30px;
}

.top-list li a {
  display: flex;
  align-items: center;
}

.top-list li img {
  flex: 0 1 90px;
}

.top-list li .top-list_info {
  margin-left: 20px;
}

.top-list li time {
  font-size: 14px;
  color: #333;
}

.top-list li .top-list_title {
  margin-top: 0.25em;
  line-height: 1.4;
}



.top-feature2 {
  text-align: center;
  position: relative;
  z-index: 1;
}

.top-feature2 .top-feature_box {
  padding: 0 30px 20px;
}

.top-feature2 h2 {
  font-size: 22px;
  margin-bottom: 0.5em;
}

.top-feature2 h3 {
  font-size: 20px;
  margin-bottom: 0.5em;
}

.top-feature2 p {
  text-align: left;
}

.top-feature2 a {
  padding-bottom: 0.2em;
  border-bottom: 2px solid #003f8e;
  font-size: 18px;
}

.top-list2 {
  display: flex;
  flex-wrap: wrap;
  margin:  0px　-10px;
}


.top-list2 li {
  width: 100%;
  padding: 0 10px;
  margin-bottom: 30px;
}

.top-list2 li a {
  display: flex;
  align-items: center;
}

.top-list2 li img {
  flex: 0 1 90px;
}

.top-list2 li .top-list_info {
  margin-left: 20px;
}

.top-list2 li time {
  font-size: 14px;
  color: #333;
}

.top-list2 li .top-list_title {
  margin-top: 0.25em;
  line-height: 1.4;
}


@media screen and (min-width: 768px) {
  .top-feature {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    background-color: #302833;
    margin-top: -50px;
    padding-top: 100px;
    padding-bottom: 50px;
  }
  .top-feature .top-feature_box {
    background-color: #fff;
    max-width: 600px;
    padding: 0 60px 30px 40px;
  }
  .top-feature img {
    margin-top: 40px;
    margin-left: -30px;
    max-width: 48vw;
  }
  .top-feature:nth-of-type(2n) {
    flex-direction: row-reverse;
    padding-top: 50px;
    padding-bottom: 80px;
  }
  .top-feature:nth-of-type(2n) .top-feature_box {
    padding-right: 40px;
    padding-left: 60px;
  }
  .top-feature:nth-of-type(2n) img {
    margin-right: -30px;
    margin-left: 0;
  }
  .top-list li {
    width: 50%;
	
  }


  .top-feature2 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    background-color: #302833;
    margin-top: 50px;
    padding-top: 100px;
    padding-bottom: 50px;
  }
  .top-feature2 .top-feature_box {
    background-color: #fff;
    max-width: 600px;
    padding: 0 60px 30px 40px;
  }
  .top-feature2 img {
    margin-top: 40px;
    margin-left: -30px;
    max-width: 48vw;
  }
  .top-feature2:nth-of-type(2n) {
    flex-direction: row-reverse;
    padding-top: 50px;
    padding-bottom: 80px;
  }
  .top-feature2:nth-of-type(2n) .top-feature_box {
    padding-right: 40px;
    padding-left: 60px;
  }
  .top-feature2:nth-of-type(2n) img {
    margin-right: -30px;
    margin-left: 0;
  }
  .top-list2 li {
    width: 50%;
	
  }


}

/*-------------------------------------------
 ニュースページ
-------------------------------------------*/
.news-article {
  margin-top: 20px;
  max-width: 800px;
  padding: 0 30px 20px;
}

.news-article .news-thumb {
  text-align: center;
}


.news-article h1 {
  font-size: 25px;
  line-height: 1.4;
  margin-top: 1em;
  margin-bottom: 0.5em;
}


.news-article h2 {
  font-size: 22px;
  line-height: 1.4;
  margin-top: 3em;
  margin-bottom: 0.5em;
}

.news-article time {
  font-size: 12px;
}

.news-article h3, .news-article h4, .news-article h5 {
  margin-top: 3em;
  margin-bottom: 0.5em;
}

.news-article h3 {
  font-size: 20px;
}

.news-article h4 {
  font-size: 20px;
}

.news-article h5 {
  font-size: 18px;
}

.news-article figure {
  text-align: center;
  margin: 0;
}

.news-article figcaption {
  font-size: 14px;
}

.news-article blockquote {
  border-left: 5px solid #dcd6cb;
  margin-left: 0;
  padding-left: 0.8em;
}


@media screen and (min-width: 768px) {
  .news-article h2 {
    font-size: 24px;
  }
  .news-article time {
    font-size: 14px;
  }
  
  .news-article {
  margin-top: 20px;
  max-width: 700px;
}

.news-article h1 {
  font-size: 40px;
  line-height: 1.4;
  margin-top: 1em;
  margin-bottom: 0.5em;
}


.news-article h2 {
  font-size: 30px;
  line-height: 1.4;
  margin-top: 3em;
  margin-bottom: 0.5em;
}

.news-article time {
  font-size: 12px;
}

.news-article h3, .news-article h4, .news-article h5 {
  margin-top: 3em;
  margin-bottom: 0.5em;
}

.news-article h3 {
  font-size: 24px;
}

.news-article h4 {
  font-size: 20px;
}

.news-article h5 {
  font-size: 17px;
}

  
}

/*-------------------------------------------
 よくある質問ページ
-------------------------------------------*/
.faq-section {
  max-width: 800px;
}

.faq-section .faq-content {
  margin-bottom: 60px;
}

.faq-section h2, .faq-section p {
  margin-top: 1.2em;
  display: flex;
}

.faq-section h2:before, .faq-section p:before {
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  margin-top: -0.16em;
  margin-right: 15px;
}

.faq-section h2:before {
  content: "Q";
}

.faq-section p:before {
  content: "A";
  color: #4EB0B5;
}

@media screen and (min-width: 768px) {
  .faq-section h2, .faq-section p {
    margin-top: 2em;
  }
  .faq-section h2:before, .faq-section p:before {
    margin-top: -0.2em;
    font-size: 55px;
  }
}

/*-------------------------------------------
 トップへ戻るボタン
-------------------------------------------*/

#page_top{
width: 40px;
height: 40px;
z-index: 30;
position: fixed;
right: 0;
bottom: 10px;
background: #737373;
opacity: 0.6;
}


#page_top a{
position: relative;
display: block;
width: 40px;
height: 40px;
text-decoration: none;
}

#page_top a::after{
content: '▲';
font-size: 18px;
font-weight: bold;
color: #fff;
position: absolute;
top: 3px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
text-align: center;
}



/*-------------------------------------------
 目次 開閉
-------------------------------------------*/




.dropdown{
  display:none;
  margin: 0.5em;
  padding: 0;
}

.dropdown label,
li{
	line-height: 2;
	font-weight:normal;
	list-style-type:none;    /* マークの種類 */
}

.dropdown ul {
  margin: 0.5em 0;
  padding: 5px 10px;
}



.dropdown label,
li ul li{
	line-height: 1.6;
    font-weight:normal;    
    list-style-type:none;    /* マークの種類 */
}

.dropdownli::before,

input[type="checkbox"]{
  display:none;
}
label[for="menu"]{
  display:block;
  color:#333; /* 目次リスト部分のテキスト色 */
  text-align:center;
}
label[for="menu"]::before{
  transform:rotate(225deg);
}
#menu:checked + .dropdown{
  display:block;
 
}

/*目次のデザイン変更*/    
 
.table-of-contents {
    margin: 2em 0.5em;
    padding: 0px ; /* 枠内の余白（上右下左） */
   
    border:solid 1px #CCC;  /* 線の種類と色 */
    background:#fff;  /* 背景 */
}




.table-of-contents li{
	margin: 0.5em 0em;	
	line-height: 1.2;
	font-weight:bold;
	list-style-type:none;    /* マークの種類 */
 
}

.table-of-contents li ul li{
	margin: 0.5em 0em 0.5em 1em;   	
	line-height: 1.2;
    font-weight:normal;  
	list-style: square;  
    
}

.table-of-contents li a{
	
    color:#333; /* 目次リスト部分のテキスト色 */
    text-decoration:none; /* リンクの下線をつけたくない場合 */
}

.table-of-contents p{	
    color:#666; /* 目次リスト部分のテキスト色 */
}

.table-of-contents li a:hover	{text-decoration: underline;}


@media screen and (min-width: 768px) {

  
  .table-of-contents {
  width: 600px;
  border-collapse: collapse;
  margin: 2em auto ;
}

}


/*-------------------------------------------
 吹き出しのデザイン
-------------------------------------------*/


/* 吹き出し本体 */
.balloon1{z-index: 20;
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #000000;
  background-color:#f5f5f5;
  margin-left: 80px; 
  margin-top:50px;
  margin-bottom: 50px;         /* 左に余白を設ける */
}
/* 画像 - 絶対配置で左上に配置 */
.balloon1 .icon{
	z-index: 20;
	position: absolute;
	left: -78px;
	top: 0;
}
/* 三角アイコン */
.balloon1::before{z-index: 20;
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #f5f5f5;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  margin-bottom:25px/;
}

/* 吹き出し本体 */
.balloon2{z-index: 20;
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #000000;
  background-color: #f5f5f5;
  margin-right: 80px;
  margin-top:50px;
  margin-bottom: 50px;          /* 右に余白を設ける */
}
/* 画像 - 絶対配置で右上に配置 */
.balloon2 .icon{
  position: absolute;
  right: -80px;
  top: 0;
}
/* 三角アイコン */
.balloon2::before{ 
  z-index: 20;
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #f5f5f5;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  margin-bottom:25px/;
  
}


/*-------------------------------------------
TOP用吹き出し
-------------------------------------------*/
/* 吹き出し本体 */
.balloon1{z-index: 20;
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #000000;
  background-color:#f5f5f5;
  margin-left: 80px; 
  margin-top:50px;
  margin-bottom: 50px;         /* 左に余白を設ける */
}
/* 画像 - 絶対配置で左上に配置 */
.balloon1 .icon2{
	z-index: 20;
	position: absolute;
	left: -78px;
	top: 0;
}
/* 三角アイコン */
.balloon1::before{z-index: 20;
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #f5f5f5;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  margin-bottom:25px/;
}

/* 吹き出し本体 */
.balloon2{z-index: 20;
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #000000;
  background-color: #f5f5f5;
  margin-right: 80px;
  margin-top:50px;
  margin-bottom: 50px;          /* 右に余白を設ける */
}
/* 画像 - 絶対配置で右上に配置 */
.balloon2 .icon2{
  position: absolute;
  right: -80px;
  top: 0;
}
/* 三角アイコン */
.balloon2::before{ 
  z-index: 20;
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 20px;
  border-left: 15px solid #f5f5f5;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  margin-bottom:25px/;
  
}


/*-------------------------------------------
 あわせて読みたい記事
-------------------------------------------*/


.kanren ul	{margin: 0 auto 50px;
     max-width: 450px;
    padding: 0 ;  
	text-decoration: none;
	list-style: none}

.kanren li a	{display: block;
	padding: 5px;
	border: solid 1px #192f60;
	box-shadow: 1px 1px 3px #aaa;
	font-size: 16px;
	text-decoration: none}



.kanren li a img	{border: none}

.kanren t1	{
	
	border-bottom: solid 1px #192f60;
	color: #192f60;
	font-size: 18px}

.kanren a:after	{content: "";
	display: block;
	clear: both}

.kanren img	{float: left;
	width: 120px}

.kanren .text	{float: none;
	width: auto;
	font-weight:normal;
	line-height: 1.3; 
	color: #333;
	margin-left: 120px;
	padding-left: 15px}

.kanren span	{display: block;
	color: #666666;
	font-size: 16px}


/* --------------------------------------------------
文字装飾
-------------------------------------------------- */
.line { padding-bottom: 0.2em;
  border-bottom: 2px solid #003f8e;
  font-size: 18px;
}	  



b.a { padding: 0px  10px;
           font-size: 22px;

 }


b.b { padding: 0px  10px;
           font-size: 25px;

 }
 
b.r { padding: 0px  5px;
       font-size: 22px;
	  color: #ce000d;

 } 
 

b.bl { padding: 0px  10px;
        font-size: 22px; 
	  color: #36F;

 } 
 
b.red { padding: 0px  10px;
        font-size: 22px; 
	  color: #F69;

 } 
 
b.grey { padding: 0px  10px;
        font-size: 12px; 
	  color: #999;

 } 
	


strong { padding: 0px  5px; }

strong.b { padding: 0px  10px;
           font-size: 20px;

 }

strong.a { padding: 0px  10px;
           font-size: 22px;

 }


strong.b { padding: 0px  10px;
           font-size: 25px;

 }
 
strong.r { padding: 0px  5px;
       font-size: 22px;
	  color: #ce000d;

 } 
 

strong.bl { padding: 0px  10px;
        font-size: 22px; 
	  color: #36F;

 } 
 
strong.red { padding: 0px  10px;
        font-size: 22px; 
	  color: #F69;

 } 
 
strong.grey { padding: 0px  10px;
        font-size: 12px; 
	  color: #999;

 }  

/* --------------------------------------------------
ボタン装飾
-------------------------------------------------- */
.btn-square {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #666;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #333;
  border-radius: 3px;
}
.btn-square:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}




/* --------------------------------------------------
テーブル
-------------------------------------------------- */

table.n{
	 width:100%;
  border-collapse:collapse;
  margin: 5em 0;
}
table.n td,th{
  border:1px solid #ccc;
  padding : 10px 10px;
}
table.n th{
  background:#EFEFEF;
}


@media screen and (min-width: 768px) {

table.n{
  width: 500px;
  border-collapse: collapse;
  margin: 5em auto ;
}


table.n td,th{
  border:1px solid #ccc;
  padding : 20px 10px;
}


}


/*-------------------------------------------
box グレー
-------------------------------------------*/

.box_g {
    padding: 5px 15px 15px 15px; /* 枠内の余白（上右下左） */
    margin: 2em auto ;
    background: #dcdcdc;/*背景色*/
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

.box_g .box-title {
    font-size: 1.1em;
    background: #999;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
	margin-bottom:0.8em;
}


.box_g p {
	color:#333;
	font-weight: normal;
    line-height: 1.8;
}


.box_g li{
   	color:#333;
	font-weight: normal;
    line-height: 1.8;
	list-style: square; 
  }

/*-------------------------------------------
box グレーナンバー
-------------------------------------------*/


.box_gn {
    padding: 5px 15px 15px 15px; /* 枠内の余白（上右下左） */
    margin: 2em auto ;
    background: #dcdcdc;/*背景色*/
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}



.box_gn .box-title {
    font-size: 1.1em;
    background: #999;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
	margin-bottom:0.8em;
}


.box_gn p {
	color:#333;
	font-weight: normal;
    line-height: 1.8;
}



.box_gn li{
	padding: 1em 0.5em ;
   	color:#333;
	font-weight: normal;
    line-height: 1.6;
	list-style: decimal;
  }
  
@media screen and (min-width:768px) {
.box_g {
	width: 600px;

}

.box_gn {
	width: 600px;

}

}  


/*-------------------------------------------
横並びに３つのBOX
-------------------------------------------*/
.plan-area {
  background-color: #fff;
}


.plan-area h2{
   font-size: 25px;

}


.plan-area h3{
   font-size: 23px;

}

.plan-area h4{
   font-size: 22px;
}

.plan-content {
  display: flex;
  flex-direction: column;
}

.plan-item {
  background-color: #fff;
  margin-bottom: 30px;
  box-shadow: 1px 1px 3px #aaa;
}

.plan-info {
  padding: 0 15px 15px;
}

.plan-info a {
  padding-bottom: 0.2em;
  border-bottom: 2px ;
  font-size: 16px;
}


.plan-title {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #060606;
}

.plan-price {
  text-align: center;
  padding: 10px;
  border: 2px solid #527acc;
}


.plan-list li a::before {
  content: "";
  background: url(../img/list-marker.svg) no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 3px;
}

@media screen and (min-width:768px) {

	
  .plan-content {
    flex-direction: row;
  }
  
  .plan-area h2{
   font-size: 25px;

}

  .plan-item {
    flex: 1;
    margin-top: 0;
    margin-left: 15px;
    margin-right: 15px;
  }
  
  .inner {
	margin: 0 auto; 
    max-width: 1400px;
  }
}







/* --------------------------------------------------
  上ラインBOX
-------------------------------------------------- */

.box11{
    padding: 0.5em 1em;
	margin: 2em auto ;
    color: #5d627b;
    background: white;
    border-top: solid 5px #99885c;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

.box11 p {
    margin: 0; 
    padding: 0;
}


@media screen and (min-width:768px) {
.box11{
   width: 600px;
}

}  


/* --------------------------------------------------
  青BOX
-------------------------------------------------- */

.box_b {
	padding: 5px 15px 15px 15px; /* 枠内の余白（上右下左） */
    margin: 2em auto ;
    background: #dcefff;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box_b .box-title {
    font-size: 1.1em;
    background: #5fb3f5;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
	margin-bottom:0.8em;
}
.box_b p {
    	color:#333;
	font-weight: normal;
    line-height: 1.8;  
}

.box_b li{
   	color:#333;
	font-weight: normal;
    line-height: 1.8;
	list-style: disc;
  }
  
@media screen and (min-width:768px) {
.box_b{
   width: 600px;
}

}  
  

/* --------------------------------------------------
  ピンクBOX
-------------------------------------------------- */

.box_p {
    padding: 5px 15px 15px 15px; /* 枠内の余白（上右下左） */
    margin: 2em auto ;
    background: #FCF;/*背景色*/
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

.box_p .box-title {
    font-size: 1.1em;
    background: #F6F;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
	margin-bottom:0.8em;
}


.box_p p {
	color:#333;
	font-weight: normal;
    line-height: 1.8;
}

.box_p li{
   	color:#333;
	font-weight: normal;
    line-height: 1.8;
	list-style: disc;
  }



@media screen and (min-width:768px) {
.box_p{
   width: 600px;
}

}  

/*-------------------------------------------
　アクセス
-------------------------------------------*/
.access-area {
  padding-bottom: 0;
}

.access-area img {
  display: block;
  max-width: 280px;
  max-height: 280px;
  border-radius: 50%;
  overflow: hidden;
  margin: 10px auto 30px;
}

.access-maparea {
  position: relative;
  padding-top: 100%;
}

.access-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width:768px) {
  .access-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 150px;
  }

  .access-maparea {
    position: relative;
    padding-top: 30%;
  }

}


/* --------------------------------------------------
「白透明リスト」
-------------------------------------------------- */


.contents-list {
  margin-bottom: 0px;
  background: url(../img/mono-bk2800.jpg) no-repeat center center #fdd;
  background-size: cover;
  padding:10px 0px 50px 0px;
}


.contents-list h2 {
  text-align: center;
  font-size: 25px;
  color: #666;
}

.contents-list ul {
  list-style: none;
  width: 340px;
  margin: 0 auto;
  padding: 8px 24px;
  font-size: 0.85rem;
  background-color: rgba(255,255,255,0.8);
}


.contents-list ul li {
  border-bottom: 1px dotted #000;
  padding: 10px 0;
}

.contents-list ul li:last-child {
  border-bottom: none;
}

.contents-list ul li ul  {
  background-color: rgba(0,0,0,0);
  width: 290px; 
}

.contents-list ul li ul li {
  border-bottom: none;
  padding: 5px 0;
  list-style: square;
  background-color: none; 
}


@media screen and (min-width: 768px) {
  .contents-list {
	margin-top: -30px;
    margin-bottom: 30px;
    padding: 10px 0px 100px 0px;
  }
  
  .contents-list ul {
    width: 640px;
    font-size: 1rem;
  }
  
  .contents-list ul li ul  {
  background-color: rgba(0,0,0,0);
  width: 500px; 
}
  
}

/* --------------------------------------------------
「白透明リスト」のスタイル調整 */


.author {
  margin-bottom: 24px;
}

.author dl {
  width: 340px;
  margin: 0 auto;
}

.author dl dt {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #000;
}

.author dl dd {
  margin-bottom: 16px;
  font-size: 0.75rem;
}

@media screen and (min-width: 768px) {
  .author {
    margin-bottom: 80px;
  }
  
  .author dl {
    width: 680px;
  }
  
  .author dl dt {
    margin-bottom: 16px;
    padding-bottom: 8px;
    font-size: 1.25rem;
  }

  .author dl dd {
    margin-bottom: 40px;
    font-size: 1rem;
  }
}

/* 「白透明リスト」 フッター用 */

.contents-list2 {
  margin-bottom: -80px;
  background: url(../img/mono-bk2800.jpg) no-repeat center center #fdd;
  background-size: cover;
  padding:10px 0px 50px 0px;
}


.contents-list2 h2 {
  text-align: center;
  font-size: 25px;
  color: #666;
}

.contents-list2 ul {
  list-style: none;
  width: 340px;
  margin: 0 auto;
  padding: 8px 24px;
  font-size: 0.85rem;
  background-color: rgba(255,255,255,0.8);
}


.contents-list2 ul li {
  border-bottom: 1px dotted #000;
  padding: 10px 0;
}

.contents-list2 ul li:last-child {
  border-bottom: none;
}

.contents-list2 ul li ul  {
  background-color: rgba(0,0,0,0);
  width: 290px; 
}

.contents-list2 ul li ul li {
  border-bottom: none;
  padding: 5px 0;
  list-style: square;
  background-color: none; 
}


@media screen and (min-width: 768px) {
  .contents-list2 {
    margin-bottom: -100px;
    padding: 10px 0px 100px 0px;
  }
  
  .contents-list2 ul {
    width: 640px;
    font-size: 1rem;
  }
  
  .contents-list2 ul li ul  {
  background-color: rgba(0,0,0,0);
  width: 500px; 
}
  
}

/* --------------------------------------------------
カエレバ、ヨメレバ、トマレバ
-------------------------------------------------- */
/* ************************************* */
/* 基本style */
.kaerebalink-box,
.booklink-box,
.tomarebalink-box{
border: 3px double #ccc;
padding: 3%;
margin: 1em 0 2.5em;
overflow: hidden;
font-size: small;
}
.kaerebalink-box a,
.booklink-box a,
.tomarebalink-box a{
text-decoration: none;
color: initial;
}
.kaerebalink-box a[target="_blank"]::after,
.booklink-box a[target="_blank"]::after,
.tomarebalink-box a[target="_blank"]::after{
content: none;
}
.kaerebalink-image,
.booklink-image,
.tomarebalink-image{
max-width: 150px;
text-align: center;
margin: 10px auto!important;
float: none!important;
}
.kaerebalink-name,
.booklink-name,
.tomarebalink-name{
font-weight: bold;
font-size: 120%;
line-height: 1.8!important;
margin-bottom: 10px!important;
}
.kaerebalink-name p:empty,
.booklink-name p:empty,
.tomarebalink-name p:empty{
display: none;
}
.kaerebalink-powered-date,
.booklink-powered-date,
.tomarebalink-powered-date,
.kaerebalink-detail,
.booklink-detail,
.tomarebalink-address{
font-size: 10px!important;
font-weight: normal;
}
.kaerebalink-link1,
.booklink-link2,
.tomarebalink-link1{
overflow: hidden;
}
.kaerebalink-link1 div,
.booklink-link2 div,
.tomarebalink-link1 div{
background-image: none!important;
margin: 0!important;
padding: 3px!important;
display: inline-block!important;
width: 48.5%;
}
.kaerebalink-link1 div a,
.booklink-link2 div a,
.tomarebalink-link1 div a{
border-width: 2px;
border-style: solid;
font-size: 90%;
font-weight: bold;
border-radius: 5px;
padding: 0.7em 0.3em;
width: 100%;
text-align: center;
display: block;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.kaerebalink-link1 div a:hover,
.booklink-link2 div a:hover,
.tomarebalink-link1 div a:hover{
color: #fff;
box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.15);
transform:translate(-1px, -2px);
}
.kaerebalink-link1 div a:active,
.booklink-link2 div a:active,
.tomarebalink-link1 div a:active{
transform:translate(0, 1px);
}
.kaerebalink-link1 div img,
.booklink-link2 div img,
.tomarebalink-link1 div img{
display: none;
}

/* 画面幅768px以上の場合のstyle */
@media only screen and (min-width: 768px) {
.kaerebalink-image,
.booklink-image,
.tomarebalink-image{
float: left!important;
margin: 0 1.5em 0.5em 0!important;
}
.kaerebalink-link1 div,
.booklink-link2 div,
.tomarebalink-link1 div{
width: 11em;
}
}


/* ▼ボタンカラーここから▼ */
.shoplinkamazon a{
color: #e89713;
}
.shoplinkrakuten a{
color: #d91414;
}
.shoplinkyahoo a{
color: #691ed5;
}
.shoplinkjalan a{
color: #ed5016;
}
.shoplinkjtb a{
color: #e10b0b;
}
.shoplinkknt a{
color: #0f75c2;
}
.shoplinkikyu a{
color: #18b412;
}
.shoplinkrurubu a{
color: #0f32a3;
}
.shoplinkamazon a:hover{
background-color: #e89713;
border-color: #e89713;
}
.shoplinkrakuten a:hover{
background-color: #d91414;
border-color: #d91414;
}
.shoplinkyahoo a:hover{
background-color: #691ed5;
border-color: #691ed5;
}
.shoplinkjalan a:hover{
background-color: #ed5016;
border-color: #ed5016;
}
.shoplinkjtb a:hover{
background-color: #e10b0b;
border-color: #e10b0b;
}
.shoplinkknt a:hover{
background-color: #0f75c2;
border-color: #0f75c2;
}
.shoplinkikyu a:hover{
background-color: #18b412;
border-color: #18b412;
}
.shoplinkrurubu a:hover{
background-color: #0f32a3;
border-color: #0f32a3;
}
/* ▲ボタンカラーここまで▲ */