@charset "UTF-8";

/* fonts
****************************************************** */
@font-face {
  font-family: Noto Sans Japanese;
  font-style: normal;
  src: url("fonts/NotoSansJP-Regular.woff") format('woff'), url("fonts/NotoSansJP-Regular.otf") format('opentype');
  font-display: swap;
}
@font-face {
  font-family: Noto Sans Japanese;
  font-style: normal;
  font-weight: bold;
  src: url("fonts/NotoSansJP-Bold.woff") format('woff'), url("fonts/NotoSansJP-Bold.otf") format('opentype');
  font-display: swap;
}
@font-face {
  font-family: Noto Sans Japanese;
  font-style: normal;
  font-weight: 300;
  src: url("fonts/NotoSansJP-Medium.woff") format('woff'), url("fonts/NotoSansJP-Medium.otf") format('opentype');
  font-display: swap;
}
@font-face {
  font-family: Noto Sans Japanese;
  font-style: normal;
  font-weight: 900;
  src: url("fonts/NotoSansJP-Black.woff") format('woff'), url("fonts/NotoSansJP-Black.otf") format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Oswald'), url('fonts/Oswald-Regular.woff') format('woff'), url("fonts/Oswald-Regular.otf") format('opentype');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Oswald Bold'), url('fonts/Oswald-Bold.woff') format('woff'), url("fonts/Oswald-Bold.otf") format('opentype');
}

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?i4bstk');
  src:  url('fonts/icomoon.eot?i4bstk#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?i4bstk') format('truetype'),
    url('fonts/icomoon.woff?i4bstk') format('woff'),
    url('fonts/icomoon.svg?i4bstk#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-triangle_downward:before {
  content: "\e900";
}
.icon-triangle:before {
  content: "\e901";
}
.icon-plus-alt:before {
  content: "\e902";
}
.icon-minus-alt:before {
  content: "\e903";
}

/* ******************************************************
共通
****************************************************** */
html {
  font: 62.5%/1.6 "Noto Sans Japanese", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", '游ゴシック体','YuGothic', "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans Japanese", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", '游ゴシック体','YuGothic', "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  font-size: 12px;
  font-size: 3.28125vw;/* 640pxで21px */
  color: #000;
}
h1, h2, h3, h4, h5, h6, p, figure, article {
  margin: 0;
  padding: 0;
}
ul, ol, dl, dd {
  margin: 0;
  padding: 0;
  list-style: none;
}
em {
  font-style: normal;
}
a {
  text-decoration: none;
  transition: opacity .3s ease;
  color: #000;
}
a:link,
a:visited {
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
  border: none;
}
#main {
  overflow: hidden;
}
.pc {
  display: none;
}
.img:after {
  content: "";
  display: block;
  clear: both;
}
.all::after {
  content: "";
  display: block;
  clear: both;
}
.content {
/*  max-width: 960px;*/
  width: 93.75%;
  margin: auto;
}
.content_wd{
  width: 100%;   
}
.date, .num {
  font-family: 'Oswald';
}
@media screen and (min-width: 768px), print {
  body {
    font-size: 160%;
    font-size: 1.6rem;
  }
  img{
    -webkit-backface-visibility: hidden;
  }
  .pc {
    display: block;
  }
  br.pc {
    display: inline;
  }
  .sp {
    display: none;
  }
  .content {
    /*width: 960px;*/
	  width: 1080px;
  }
    .content_wd{
        width: 100%;
    }
  a:hover {
    text-decoration: none;
    opacity: .7;
  }
  a:hover img {
    opacity: .7;
  }
}

/*  *********************************************************************** */
@media screen and (min-width: 768px) and (max-device-width:960px), print {
  body {
    /*width: 960px;*/
	  width: 1080px;
  }
}


/* ******************************************************
footer
****************************************************** */
.n4-foot-wrap {
  display: none;
}

/* (min-width: 769px) 幅768pxのiPadはスマホ用フッタを表示させるため */
@media screen and (min-width: 769px), print {
  .n4-foot-wrap-sp {
    display: none;
  }
  .n4-foot-wrap {
    display: block;
    margin-top: 0;
  }
}


/* ******************************************************
.btn
****************************************************** */
.btn a {
  display: inline-block;
  padding: .85em 1.2em;
  box-shadow: 0 1.5625vw 1.5625vw 0 rgba(0,0,0,.1);
  vertical-align: middle;
  font-weight: normal;
}
.btn a::after {
  content: "\e901";
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  bottom: .25em;
  display: inline-block;
  margin-left: 2.5em;
  font-size: 2vw;
}
.btn a.order,
.btn a.order2 {
  padding: .8966em 1.2em;
  background: #10b1f4;
  font-size: 114.2%;
  font-style: italic;
  color: #fff;
}
/*202010Update*/
.btn a.try {
  padding: .8966em 1.2em;
  font-size: 114.2%;
  background: #005bac;
  font-style: italic;
  color: #fff;
}
.btn a span {
  display: inline-block;
  border-bottom: dashed 1px;
}
/*202105Update*/
.btn a.ebook,
.btn a.video,
.btn a.ebook2 {
  padding: .8966em 1.2em;
  font-size: 114.2%;
  background: #FCC32B;
  font-style: italic;
  color: #000;
}
.btn a.viewer {
  padding: .8966em 1.2em;
  font-size: 114.2%;
  background: #FCC32B;
  font-style: italic;
  color: #000;
}
 .btn_area .btn_area_box .viewer_note{
     width: 80%;
     margin-left: auto;
     margin-right: auto;
     font-size: 88%;
     text-decoration: underline;
     margin-top: 1em;
     text-indent: -1em;
     padding-left: 1em;
     text-align: left;
}
@media screen and (max-width: 768px), print {
    .all{
        width: 93%;
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (min-width: 768px), print {
  .btn a {
    padding: .75em 1.2em;
    -moz-box-shadow: 0 10px 10px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 10px 10px 0 rgba(0,0,0,.1);
    box-shadow: 0 10px 10px 0 rgba(0,0,0,.1);
    -ms-box-shadow: 0 10px 10px 0 rgba(0,0,0,.1);
    font-size: 150%;
  }
/*202010Update*/
  .btn a.order {
    padding: 21px 3em;
  	margin-bottom: .5em;
    font-size: 24px;
  }
  .btn a.order2 {
    padding: 18px 2.4em;
    font-size: 21px;
  	margin-bottom: 0;
  }
  .btn a.try {
    padding: 21px 2.7em;
    font-size: 24px;
  	margin-bottom: 0;
  }
  .btn a::after {
    font-size: 13px;
  }
/*202105Update*/
.btn a.ebook,
.btn a.video,
.btn a.ebook2 {
    padding: 18px 2.4em;
    font-size: 21px;
  	margin-bottom: 0;
  }
.btn a.viewer {
    padding: 21px 1.5em;
    font-size: 24px;
  	margin-bottom: 0;
  }
}

/* ******************************************************
header
****************************************************** */
#header {
  overflow: hidden;
}
#header > .content {
  position: relative;
}
@media screen and (min-width: 768px), print {
  #header {
    overflow: visible;
  }
  #header .header_top {
    margin: 0;
  }
}

/* ******************************************************
section
****************************************************** */
.section {
  padding: 1em 0 2em;
  /*border-bottom: solid 2px #10b1f4;*/
}
.section_ttl {
  padding: 1em 0;
  line-height: 1.3;
  text-align: center;
  font-size: 165.7%;
  font-weight: bold;
}
.section_ttl span {
  display: block;
  font-size: 53.8%;
}
.section_ttl b {
  position: relative;
  display: inline-block;
}
.section_ttl b::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.1em;
  display: block;
  width: 100%;
  height: 60%;
  background: url(../img/bg_ttl.png);
  z-index: -1;
}
.section_ttl small {
  display: block;
  margin-top: 1em;
  font-size: 46.1%;
  color: #10b1f4;
}
.section_subttl {
  padding: 1em 0;
  line-height: 1.3;
  text-align: center;
  font-size: 160%;
  font-weight: bold;
	width: 90%;
	margin: auto;
}
.section_subttl em{
	color: #ea513a;
}
/*.section_subttl::before,.section_subttl::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #000066;
}
.section_subttl::before {
    margin-right: 25px;
}
.section_subttl::after {
    margin-left: 25px;
}*/
.list .img {
  background-color: #10b1f4;
}
.list .img img {
  display: block;
  margin: auto;
}
.order_blk {
  margin: 6em 0 3em;
  text-align: center;
}
.order_blk .order_ttl {
  margin-bottom: 1em;
  line-height: 1.4;
  font-weight: bold;
}
.order_blk .order_ttl span {
  display: block;
  font-size: 85.7%;
  color: #10b1f4;
}
.order_blk .order_ttl em {
  display: block;
  font-size: 171.4%;
}
.order_blk .price {
  margin-bottom: 1.5em;
}
.order_blk .price em {
  display: inline-block;
  font-size: 142.8%;
  font-weight: bold;
  color: #10b1f4;
}
.order_blk .price em .num {
  position: relative;
  top: 2px;
  line-height: 1;
  font-size: 200%;
  color: #10b1f4;
}
.order_blk .price .label {
  position: relative;
  top: -.4em;
  display: inline-block;
  padding: .2em .1em .2em .6em;
  margin-left: .5em;
  background-color: #10b1f4;
  font-size: 85.7%;
  font-weight: 500;
  color: #fff;
}
.order_blk .btn a {
  display: block;
}
.order_blk .order {
  margin-bottom: 1em;
}

.order_blk .txt_blk {
  margin: 1em auto 2em auto;
  font-weight: bold;
}
.order_blk .txt_blk b {
  display: inline-block;
  margin-bottom: .5em;
  border-bottom: dashed 1px #000;
  font-size: 100%;
}
.order_blk .txt_blk small {
  display: block;
  margin-bottom: .1em;
  margin-left: .2em;
  font-size: 82%;
}
.order_blk .txt_blk small span {
  color: #10b1f4;
}
.order_blk .read_text{
    font-size: 120%;
    margin-bottom: .5em;
    font-weight: bold;
}
.order_blk .read_text span{
    color: #10b1f4;
}
.order_blk .btn_read_text{
    margin-bottom: .5em;
    margin-top: 1.5em;
}
@media screen and (min-width: 768px), print {
  .section {
    padding: 1.5em 0 4em;
    border-width: 1px;
  }
  .section_ttl {
    font-size: 203.7%;
  }
  .section_ttl span {
    font-size: 53.8%;
  }
  .section_ttl small {
  }
.section_subttl {
	width: 760px;
	font-size: 257.2%;
}
  .order_blk .order_ttl span {
    font-size: 112.5%;
  }
  .order_blk .order_ttl em {
    font-size: 187.5%;
  }
  .order_blk .price em {
    font-size: 131.2%;
  }
  .order_blk .price em .num {
    font-size: 257.2%;
  }
  .order_blk .price .label {
    top: -3px;
    padding: .2em .1em .3em .6em;
    line-height: 1;
    font-size: 87.5%;
  }
  .order_blk .btn a {
    display: inline-block;
  }
  .order_blk .order {
    padding: .75em 2em;
  }
  .order_blk .try {
    padding: .75em 2em;
  }
}


/* ******************************************************
#highlight
****************************************************** */
#highlight > .content {
  position: relative;
}
#highlight .badge {
  position: absolute;
  top: -2.6em;
  right: 0;
  display: block;
  width: 17.1875vw;
  height: 17.34375vw;
  background: url(../img/highlight_badge.png) no-repeat center;
  background-size: contain;
  line-height: 1.2;
  text-align: center;
  color: #fff;
}
#highlight .badge span {
  display: inline-block;
  border-bottom: dashed 1px #fff;
  font-size: 76%;
  font-weight: bold;
}
#highlight .badge span:first-child {
  margin-top: 2em;
}
#highlight .list {
  width: 90%;
  margin: 0 auto;
}
#highlight .list .box_ttl {
  padding-top: 1.8em;
  margin-bottom: 1.2em;
  line-height: 1.2;
  text-align: center;
  font-size: 131%;
  font-weight: 900;
}
#highlight .list .box .img {
    background: #E5F1F5;
}
#highlight .list li {
  position: relative;
  margin-bottom: 2em;
    margin-bottom: 4em;
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.1);
    box-shadow: 0 0 15px rgba(0,0,0,.1);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.1);
}
#highlight .list li .lbl {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  padding: .2em .5em;
  background-color: #10b1f4;
  font-size: 90.4%;
  font-weight: bold;
  color: #fff;
}
#highlight .list p {
  padding: 1em;
}
#highlight p.info_text {
	padding: 2em 0;
  width: 90%;
	margin: auto;
}
@media screen and (min-width: 768px), print {
	#highlight{		
	padding-bottom: 0;
		margin-top: 20px;
		margin-bottom: -50px;
	}
  #highlight .badge {
    top: -20px;
    right: 220px;
    width: 110px;
    height: 111px;
    line-height: 1.6;
  }
  #highlight .badge span {
    font-size: 100%;
  }
  #highlight .badge span:first-child {
    margin-top: 1.8em;
  }
  #highlight .list {
    width: 100%;
    margin-bottom: 4em;
	  margin-top: 2em;
    display: flex;
    justify-content: center;
  }
  #highlight .list .box_ttl {
    padding-top: 2.3em;
    margin-bottom: 0;
    height: 116px;
    box-sizing: border-box;
  }
  #highlight .list p {
    padding: 1.5em;
  }
  #highlight .list li{
      display: block;
      width: 33%;
      margin-right: 1.8em;
  }
  #highlight .list li:last-child{
    margin-right: 0;
    }
  #highlight .list li .lbl {
    font-size: 100%;
  }
#highlight p.info_text {
  width: 680px;
	margin-bottom: 80px;
	text-align: center;
}
}

/* ******************************************************
#trend
****************************************************** */
#trend .txt_area {
  margin: 0 auto 3em;
  width: 73.01vw;
  width: 87.91vw;
  /*width: 62.5vw;*/
  height: 47vw;
}
#trend .txt_area .vr {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
#trend .txt_area .vr li{
  font-weight: 320;
  line-height: 2.0;
	padding-top: 1.6em;
	position: relative;
}
#trend .txt_area .vr li.new{
}
#trend .txt_area .vr li span {
  border-right: solid 2px #10b1f4;
}
#trend .txt_area .vr li.new::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
	width: 100%;
  height: 24px;
  margin: auto;
  background: url("../img/new.svg") no-repeat center top;
  background-size: contain;
  z-index: -1;
}
#trend .txt_area .vr em {
  color: #ea513a;
  font-weight: 300;
	margin-top: -.5em;
	text-orientation: upright;
}
#trend .slider {
  border-bottom: solid 1px #ccc;
}
#trend .slider .slide {
  margin: 0 1em;
  transition: all 300ms ease;
}
#trend .loop_blk .slick-prev,
#trend .loop_blk .slick-next {
  width: 10vw;
  height: 7.8vw;
  z-index: 2;
}
#trend .loop_blk .slick-prev {
  left: 3.75vw;
}
#trend .loop_blk .slick-next {
  right: 3.75vw;
}
#trend .loop_blk .slick-prev:before,
#trend .loop_blk .slick-next:before {
  font-size: 9vw;
  color: #000;
}
@media screen and (min-width: 768px), print {
  #trend .txt_area {
    /*width: 304px;*/
    width: 420px;
    height: 240px;
  }
	#trend .txt_area .vr li{
	padding-top: 2.2em;
  line-height: 2.4;
	}
#trend .txt_area .vr li.new::before {
  height: 30px;
}
  #trend .loop_blk {
    min-width: 960px;
	  padding-bottom: 60px;
  }
  #trend .loop_blk .slick-prev {
    left: 25px;
  }
  #trend .loop_blk .slick-next {
    right: 25px;
  }
  #trend .loop_blk .slick-prev,
  #trend .loop_blk .slick-next {
    width: 40px;
    height: 35px;
  }
  #trend .loop_blk .slick-prev:before,
  #trend .loop_blk .slick-next:before {
    font-size: 40px;
  }
}

.mAl{
	margin-right: 1em;
}

/* ******************************************************
#viewer
****************************************************** */
#viewer {
}
#viewer .img {
  margin: 2em auto 0 auto;
  width: 80%;
}
#viewer p.viewer_text {
  margin: 0 auto 20px auto;
  width: 90%;
}
#viewer p.viewer_text span{
  font-size: 112%;
  font-weight: bold;
  display: block;
  margin-bottom: .5em;
}
#viewer p em{
    color: #EA513A;
    font-weight: bold;
    display: inline;
}
    #viewer .bgcolor{
        background: #E5F1F5;
        padding: 2em 0;
        margin-top: 2em;
    }
@media screen and (min-width: 768px), print {
  #viewer {
    text-align: center;
  }
#viewer .pc-grid-viewer{
    width: 900px;
    margin: auto;
    display: flex;
    justify-content: space-around;
	margin-bottom: -40px;
}
#viewer .img {
  width: 370px;
  margin: 2em 0 0 0;
}
}



/* ******************************************************
faq
****************************************************** */
#faq {
  border-bottom: none;
}
#faq p{
  color: #10b1f4;
  font-weight: bold;
  font-size: 117%;
  text-align: center;
  margin-bottom: 1em;
}
#faq ul{
  margin-bottom: 2em;
}
#faq li {
  margin-bottom: 3px;
  border: solid 1px #10b1f4;
}
#faq li > div {
  padding: 1em 1em;
}
#faq .q {
  position: relative;
  color: #10b1f4;
}
#faq .q::after {
  content: "\e902";
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.5em;
  display: block;
  height: 21px;
  margin: auto;
  font-size: 100%;
  color: #10b1f4;
}
#faq .q.open::after {
  content: "\e903";
}
#faq .q span {
  display: inline-block;
  width: 93%;
}
#faq .a {
  display: none;
  background-color: #10b1f4;
  color: #fff;
}
#faq .a a {
  border-bottom: dashed 1px #fff;
  color: #fff;
}
#faq .a span {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
}
@media screen and (min-width: 768px), print {
  #faq > .content {
    width: 780px;
  }
  #faq li > div {
    padding: 1.5em 2em;
    font-size: 112%;
  }
  #faq .q {
    cursor: pointer;
    transition: opacity .3s ease;
  }
  #faq .q::after {
    right: 2em;
    height: 20px;
    font-size: 110%;
  }
  #faq .q:hover {
    opacity: .7;
  }
}


/* ******************************************************
contact
****************************************************** */
#contact {
  padding-top: 0;
  padding-bottom: 4em;
}
#contact .ttl {
  margin-bottom: .5em;
  text-align: center;
  font-size: 171%;
  font-weight: 900;
}
#contact .contact_box {
  margin: auto;
  padding: 1em 2em;
  box-sizing: border-box;
  background-color: #fff;
  border: solid 1px #000;
  text-align: center;
}
#contact .contact_box a {
  color: #000;
}
#contact .contact_box .num {
  display: inline-block;
  margin-left: .2em;
  font-size: 175%;
  font-weight: bold;
}
#contact .contact_box .hour {
  display: block;
  font-size: 112%;
}
#contact .contact_box .tel img {
  max-width: 54px;
  width: 11%;
  width: 8.5vw;
}
@media screen and (min-width: 768px), print {
  #contact {
    padding-bottom: 6em;
  }
  #contact .ttl {
    font-size: 187%;
  }
  #contact .contact_box {
    max-width: 515px;
    padding: 1em 2em;
  }
  #contact .contact_box .hour {
    display: inline;
  }
  #contact .contact_box a {
    cursor: text;
  }
  #contact .contact_box .tel img {
    width: 54px;
  }
}


/* 
50 years new-header 2021.4
******************************************************/
#header_50y {
  overflow: hidden;
}
#header_50y > .content {
  position: relative;
}
#header_50y .logo_area_50y {
  /*text-align: center;*/
  width: 15.625vw;
  height: auto;
}
.header_bottom_50y {
  padding: 1em 0 0 0;
  background: url("../img/main_bk3.png") right bottom no-repeat;
  background-size: cover;
}
.header_bottom_50y .showcase {
  /*text-align: center;*/
}
.header_bottom_50y .showcase .mainvisual {
  width: 80%;
  text-align: left;
  /*background: #fff;*/
  background: rgba(255,255,255,0.85);
  margin: 2em auto 1.5em auto;
  padding: 2em;
  position: relative;
  z-index: 100;
}
.main_l_cont{
    width: 60%;
}
.header_bottom_50y .showcase .txt_blk {
  margin: 1em auto 0 auto;
  font-weight: bold;
}
.header_bottom_50y .showcase .txt_blk b {
  display: inline-block;
  margin-bottom: .5em;
  border-bottom: dashed 1px #000;
  font-size: 100%;
}
.header_bottom_50y .showcase .txt_blk small {
  display: block;
  margin-bottom: .1em;
  margin-left: .2em;
  font-size: 67%;
}
.header_bottom_50y .showcase .txt_blk small span {
  color: #10b1f4;
}
/* nav */
#nav {
  padding-top: 1em;
  padding-bottom: .5em;
}
#nav li a {
  position: relative;
  display: block;
  padding: .86em 1em;
  box-sizing: border-box;
  border-bottom: solid 2px #10b1f4;
  border-right: solid 2px #10b1f4;
  line-height: 1;
  font-size: 68%;
  font-weight: bold;
  color: #10b1f4;
}
#nav li a::after {
  content: "\e900";
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.5em;
  margin: auto;
  display: block;
  width: 2vw;
  height: 1.8vw;
  font-size: 2vw;
}
@media screen and (max-width: 768px), print {
#nav ul::after {
  content: "";
  display: block;
  clear: both;
}
#nav li {
  width: 50%;
  float: left;
  box-sizing: border-box;
}
#nav li:nth-child(odd) {
  border-left: solid 2px #10b1f4;
}
#nav li:nth-child(1) {
  border-top: solid 2px #10b1f4;
}
#nav li:nth-child(2) {
  border-top: solid 2px #10b1f4;
}
}

@media screen and (min-width: 768px), print {
  .header_bottom_50y {
	width: 100%;
    padding: 10px 0 0;
    border-width: 1px;
  }
#header_50y .logo_area_50y {
  width: 100px;
}
  .header_bottom_50y .showcase {
  }
  .header_bottom_50y .showcase .content {
  }
  .header_bottom_50y .showcase .all {
    display: block;
    margin: 0;
    padding: 0;
  }
.header_bottom_50y .showcase .mainvisual {
    width: 620px;
    background: rgba(255,255,255,0);
    margin: 0;
}
    
    .header_bottom_50y .showcase .txt_blk {
        margin-bottom: 0;
    }
  .header_bottom_50y .showcase .txt_blk b {
    font-size: 171%;
  }
  .header_bottom_50y .showcase .txt_blk small {
    font-size: 110%;
  }
  #nav{
   padding: .5em  0;
  }
  #nav ul {
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
  }
  #nav.un_cust ul {
      width: 880px;
  }
  #nav.cust ul {
      width: 680px;
  }
  #nav li {
    display: inline-block;
    width: auto;
    margin-bottom: 0;
  }
#nav li:nth-child(2n+1) {
  border-right: none;
}
#nav li:nth-child(2n) {
  border-left: none;
}
#nav li:last-child{
    margin-right: 0;
    }
#nav li a {
    padding: 1.375em 0;
    border: none;
    font-size: 90%;
  }
#nav li a::after {
    position: static;
    display: inline-block;
    width: auto;
    height: auto;
    font-size: 10px;
    margin-left: 1em;
  }
#nav li.cp50y span{
  border-bottom: dotted 2px #10b1f4;
}
} 

/* ******************************************************
#cp_50y
****************************************************** */

#cp_50y > .content_wd {
  position: relative;
    width: 100%;
}
#cp_50y .cp_50y_text {
  text-align: center;
  margin-bottom: 1.5em;
  /*font-size: 112%;
  font-weight: bold;*/
}
#cp_50y .list {
  width: 100%;
  margin-bottom: 2em;
  background: #E5F1F5;
  padding: 2em 1.5em;
}
#cp_50y .list .img2 {
  width: 90%;
  margin-left: auto; 
  margin-right: auto;
  text-align: center;
}
#cp_50y .list .box{
    margin-bottom: 4em;
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.1);
    box-shadow: 0 0 15px rgba(0,0,0,.1);
    -ms-box-shadow: 0 0 15px rgba(0,0,0,.1);
    padding: 2em 1em;
}
#cp_50y .list .box_ttl {
  padding-top: .8em;
  margin: 0 auto .5em auto;
  line-height: 1.2;
    font-size: 120%;
  font-weight: 900;
    text-align: center;
}
#cp_50y .list li .lbl {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  padding: .2em .5em;
  background-color: #10b1f4;
  font-size: 90.4%;
  font-weight: bold;
  color: #fff;
}
#cp_50y .list .box_ttl em{
    display:block;
  font-size: 131%;
    paddng-left: .5em;
}
#cp_50y .list li {
  position: relative;
  background: #fff;
}
#cp_50y .list li .lbl {
  position: absolute;
  padding: 1.2em 1.5em;
}
#cp_50y .list p.cp_50y_about {
  padding: 1em;
}
#cp_50y .list p b{
    color: #EA513A;
  font-weight: 900;
    text-align: center;
    display: block;
    margin-bottom: .5em;
}
#cp_50y .box p span {
  display: block; 
font-size:92%;
}
#cp_50y .box .bookinfo{
  margin:1em auto 0 auto;
  padding-top: 1.5em;
  border-top: solid 1px #efefef;
font-size:92%;
    text-align: center;
}
#cp_50y .box .bookinfo a.textLink{
  color: #10B1F4;
  border-bottom: 1px solid #10B1F4;
}
#cp_50y .box .videoinfo,
#cp_50y .box .videoinfo2{
  width: 80%;
  margin:1em auto 0 auto;
  font-size: 92%;
  padding: 1.5em;
}
#cp_50y .box .videoinfo{
  border: solid 1px #efefef;	
}
#cp_50y .box .videoinfo2{
  background: #F4F7F8;	
}
#cp_50y .box .videoinfo b,
#cp_50y .box .videoinfo2 b{
    margin-bottom: .5em;
    display: block;
}
#cp_50y .box .videoinfo span,
#cp_50y .box .videoinfo2 span{
    display:block;
    text-indent: -3em;
    padding-left: 3em;
}
#cp_50y .btn_area{
    text-align: center;
    margin: 1em auto;
}
#cp_50y .btn_area p{
    margin-bottom: .5em;
}
.ebook_blk {
  margin: 4em 0 1em;
  text-align: center;
}
.order_ttl_cp {
  margin-bottom: 1em;
  line-height: 1.4;
  font-weight: bold;
}
.order_ttl_cp em {
  display: block;
  color: #10b1f4;
}
.ebook_blk .ebook {
  margin-bottom: 1.5em;
}
.ebook_blk .btn_cp a {
  display: block;
}
.ebook_blk .btn_cp a.ebook {
  padding: .8966em 1.2em;
  background: #FFC400;
  font-size: 114.2%;
  color: #000;
}
@media screen and (min-width: 768px), print {
#cp_50y .list{  
}
#cp_50y .list li{
  width: 900px;
  margin: auto;
}
#cp_50y .list li .box{
  padding: 0 0 1.5em 0;
  margin-bottom: 2em;
}
#cp_50y .list li .box.nonsp{
  padding: 0;
}
#cp_50y .list .box .flex-area{
  display: flex;
}
#cp_50y .list .box .img2{
    width: 36%;
}
#cp_50y .list .box .img2 img{
    vertical-align:top;
}
#cp_50y .list .box .txt2{
    width: 64%;
}
#cp_50y .list p b{
    text-align: left;
}
#cp_50y .list .box_ttl {
  padding: 1.5em 0 0 1.5em;
  margin-bottom: 1em;
  text-align: left;
}
  #cp_50y .list p.cp_50y_about {
    padding: 0 1.5em;
  }
#cp_50y .box .bookinfo{
    display: block;
}
  .ebook_blk .order_ttl span {
    font-size: 112.5%;
  }
  .ebook_blk .order_ttl em {
    font-size: 187.5%;
  }
  .ebook_blk .ebook em {
    font-size: 131.2%;
  }
  .ebook_blk .btn_cp a {
    display: inline-block;
    padding: .75em 1.2em;
    -moz-box-shadow: 0 10px 10px 0 rgba(0,0,0,.1);
    -webkit-box-shadow: 0 10px 10px 0 rgba(0,0,0,.1);
    box-shadow: 0 10px 10px 0 rgba(0,0,0,.1);
    -ms-box-shadow: 0 10px 10px 0 rgba(0,0,0,.1);
    font-size: 150%;
  }
  .ebook_blk .btn_cp a.ebook {
    padding: 21px 2em;
  	margin-bottom: .5em;
    font-size: 24px;
  }
  #cp_50y .box .bookinfo{
      margin-bottom: 1.5em;
  }
  #cp_50y .box .videoinfo{
      margin-bottom: 1.5em;
  }
}


/* ******************************************************
202105 update
****************************************************** 
.tab_menu{
  padding-top: 1.5em;
  border-bottom: 2px solid #10b1f4;
}
.tab_menu ul{
    display: flex;
    width: 96%;
    margin: 0 auto;
}
.tab_menu li{
  width: 49%;
  box-sizing: border-box;
  background-color: #10b1f4;
  border-radius: 15px 15px 0 0;
  color: #fff;
  text-align: center;
  font-weight: bold;
  line-height: 1.4;
  padding: .5em 0;
  box-shadow: -10px -10px 15px -10px #ccc;
}
.tab_menu li:first-child{
    margin-right: 5px;
  padding: 1em 0 0 0;
}
.tab_menu li a{
    display:block;
}
.tab_menu li a.link{
  padding: .5em 0;
}
.tab_menu li.off{
    background: #E1E6E8;
    color: #000;
  padding: .5em 0;
}
.tab_menu li span{
    font-size: 60%;
    display: block;
}
#about_id{
    margin: 1em auto;
    font-size: 80%;
    text-align: left;
    padding: 1.5em;
    background: #efefef;
}
#about_id b{
    display: block;
    margin-bottom: .5em;
}
#about_id span{
    display: block;
    font-size: 80%;
}
@media screen and (min-width: 768px), print {
.tab_menu{
  margin-top: 2em;
}
.tab_menu ul{
    width: 800px;
}
.tab_menu li{
  width: 445px;
    font-size: 120%;
}
.tab_menu li:first-child{
    margin-right: 10px;
}
.tab_menu li span{
    font-size: 80%;
    display: block;
}
}
*/
/* ******************************************************
modal
****************************************************** */
.modal-window {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
}
.modal-overlay {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  box-sizing: border-box;
  text-align: center;
    width: 87%;
    padding: 5em 1.6em 2.5em;
}
.modal-close {
  position: absolute;
    top: 1.5em;
    right: 1.25em;
}
.modal-close img {
  display: block;
  margin: auto;
    width: 6.72vw;
    height: 4.18667vw;
}
.modal-content-txt-area {
  text-align: left;
}
.ttl-modal-area {
  display: block;
  font-size: 114.3%;
}
.modal-content-txt-area p + .ttl-modal-area {
  margin-top: 1em;
}
.modal_lead {
  font-size: 142.8%;
}
.btn_modal_area a {
  display: block;
  padding: 1em;
  margin-top: 1.5em;
  background-color: #1B5CAB;
  text-align: center;
  font-size: 128.5%;
  font-weight: bold;
  color: #fff;
}
.modal-content-txt-area b {
  display: block;
  margin-bottom: .5em;
}
.modal-content-txt-area span {
  display: block;
  font-size: 90%;
  margin-top: .5em;
}
.modalWindow-open{
    color: #10b1f4;
    border-bottom: 1px dotted #10b1f4;
}
@media screen and (min-width: 768px), print {
  .modal-overlay {
    cursor: pointer;
  }
  .modal-content {
    width: 650px;
    padding: 5em 2em 3em;
  }
  .modal-close {
    top: 24px;
    right: 38px;
  }
  .modal-close img {
    width: 36px;
    height: 23px;
  }
  .modal-content-txt-area {
    padding: 0 1em;
    box-sizing: border-box;
  }
  .modal_lead {
    text-align: center;
    font-size: 20px;
  }
  .btn_modal_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 500px;
  }
  .btn_modal_area a {
    padding: 1em 1.5em;
    font-size: 18px;
  }
}


/* floating */
.mj_bnr {
  position: fixed;
  bottom: 1em;
  right: 2em;
  background-color: #EA513A;
  color: #fff;
  font-weight: bold;
  z-index: 100;
  padding: 4px;
  border-radius: 10px;
}
.mj_bnr-box{
  position: relative;
}
.mj_bnr a {
  color: #fff;
  padding-right: 20px;
}
.mj_bnr a::after {
  content:url("../img/floating_arrow.svg");
  position: absolute;
  top: 30px;
  right: 15px;
}
.mj_bnr-close {
  position: absolute;
  display: block;
  background-color: #000;
  border-radius: 50%;
}
.mj_bnr-close img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

@media screen and (max-width: 767px) {
  .mj_bnr-box {
    padding: .5em 1em;
    font-size: 114.3%;
  }
.mj_bnr a::after {
  top: 30px;
}
  .mj_bnr-close {
    top: -1.3em;
    right: -1.3em;
    width: 6.4vw;
    height: 6.4vw;
  }
  .mj_bnr-close img {
    width: 2vw;
    height: 2vw;
  }
.mj_bnr-box p.only_pc{
  display: none;
}
}
@media screen and (min-width: 768px), print {
  .mj_bnr-box {
    padding: 1em 1.5em;
    font-size: 16px;
  }
  .mj_bnr-close {
    top: -1em;
    right: -1em;
    width: 28px;
    height: 28px;
    cursor: pointer;
  }
  .mj_bnr-close img {
    width: 10px;
    height: 10px;
  }
.mj_bnr-box p.only_sp{
  display: none;
}
}

.header_bottom_50y .showcase .err_area {
  width: 95%;
  text-align: center;
  margin: 1em auto 0 auto;
  position: relative;
  z-index: 100;
}
#errbox {
  padding: 1em;
  text-align: left;
  font-size: 90%;
  color: #ce3c4e;
  font-weight: normal;
  background: #fff;
  background: rgba(255,255,255,0.85);
}
.error_box,
.error_box a {
  color: #ff0000;
  font-size: 108%;
}
@media screen and (min-width: 768px), print {
.header_bottom_50y .showcase .err_area {
    width: 600px;
}
 #errbox {
    margin-bottom: 4em;
    font-size: 89.5%;
  }
}

/* ******************************************************
2023.12 update
****************************************************** */
/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 20px;
}
.tab li a{
	display: block;
	background:#ddd;
	margin:0 2px;
	padding:10px 20px;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	color:#fff;
	background: #10b1f4;
}


/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding: 0 20px 50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.blk-howto{
	width: 95%;
	margin: 40px auto 20px auto;
}
.blk-howto h3{
    font-size: 132.5%;
	text-align: center;
}
.blk-howto h3 span{
	display: block;
    font-size: 80%;	
}
.blk-howto h4{
	paddinb-bottom: 2px;
	margin-bottom: 15px;
}
.howto-area-ttl{
	display: flex;
	background: #10b1f4;
	color: #fff;
	padding: 5px 10px;
}
.howto-area-ttl p{
	padding-left: 5px;
}
.howto-area-ttl span{
	background: #fff;
	padding: 2px;
	height: 1.5em;
	width: 6em;
	text-align: center;
	color: #10b1f4;
}
.grid-howto-area{
	padding: 40px 0;
}
.col-howto-area{
	text-align: center;
}
.col-howto-area img{
	width: 65%;
	height: auto;
	margin: 20px auto;
}
.col-howto-area p{
	text-align: left;
}
.grid-howto-detail{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.col-howto-detail-img{
	width: 30%;
}
.col-howto-detail-txt{
	font-size: 75%;
	width: 70%;
	padding-top: 20px;
}

@media screen and (min-width: 768px), print {
	.howto-area-ttl{
		width:860px;
		margin-left: auto;
		margin-right: auto;
		padding: 10px 20px;
	}
	.grid-howto-area{
		display: flex;
		justify-content: space-between;
		width: 860px;
		margin-left: auto;
		margin-right: auto;
		padding: 40px 20px;
		background: #fafafa;
	}
	.grid-howto-area-2col{
		width: 430px;
		display: flex;
		justify-content: space-between;
	}
	.col-howto-area.left{
		width: 300px;
	}
	.col-howto-area.right{
		width: 520px;
		padding-right: 40px;
		padding-top: 20px;
	}
	.col-howto-area.left-2col{
		width: 200px;
	}
	.col-howto-area.left-2col img{
		width: 90%;
	}
	.col-howto-area.right-2col{
		width: 200px;
		padding-top: 20px;
		padding-right: 10px;
	}
	.col-howto-area.left-pc{
		width: 520px;
	}
	.col-howto-area.left-pc img{
		width: 90%;
	}
	.col-howto-area.right-pc{
		width: 340px;
		padding-right: 20px;
		padding-top: 20px;
	}
}

.topinfo_area{
	background: #fff;
	border: 3px solid #ea513a;
	padding: 1em;
	margin-top: 1em;
	border-radius: 8px;
}
.topinfo_area em{
	display: block;
	font-weight: bold;
}
.topinfo_area span{
	display: block;
	padding: .5em;
	background: #ffdcd7;
}
@media screen and (min-width: 768px), print {
.topinfo_area{
	width: 430px;
}
}
/* 202402 価格改定対応用 */
.single_topics-txt{
    background-color: #e9eff4;
	/*color: #000;*/
}
.single_topics-txt_bottom{
    background-color: #fff;
}
.single_topics-txt a{
	text-decoration: underline;
	display: block;
}
.single_topics-txt_bottom a{
	text-decoration: underline;
}
@media screen and (max-width: 767px) {
.single_topics-txt,
	.single_topics-txt_bottom{
    padding: 5.6vw;
    margin-top: 10.67vw;
    margin-bottom: 10.67vw;
		text-align: left;
    /*font-size: 92.9%;*/
}
	.single_topics-txt_bottom{
		width: 80%;
		margin: auto auto 10.67vw auto;
	}
.single_topics-txt.s-bottom{
    margin-bottom: 10.67vw;
}
}
@media screen and (min-width: 768px), print {
.single_topics-txt{
	width: 610px;
    margin: 20px auto 50px auto;
	padding: 18px 40px;
    /*width: 410px;
	font-size: 13px;
    padding: 18px 40px;*/
	text-align: center;
}
.single_topics-txt_bottom{
    width: 420px;
	margin: 0 auto 30px auto;
	padding: 1.5em 1em;
	/*font-size: 13px;
    padding: 18px 40px;*/
	text-align: left;
}
.single_topics-txt.s-bottom{
    margin-bottom: 50px;
}
}
.tAc{
	text-align: center;
}


/* ******************************************************
#info
****************************************************** */
#information {
}
@media screen and (min-width: 768px), print {
}
.blk-recognize{
	margin: 40px auto 20px auto;
	width: 90%;
}
.blk-recognize h3{
    font-size: 132.5%;
	text-align: center;
	color: #10b1f4;
}
.blk-recognize h3 small{
	display: block;
    font-size: 80%;	
}
.grid-reco-area{
	margin: 40px auto;
}
.col-reco{
	box-shadow: 0 0 15px rgba(0,0,0,.1);
	margin-bottom: 30px;
}
.col-reco h4,
.single-reco-area h4{
	padding: 10px;
	color:#2868a7;
	font-size: 107%;
	text-align: center;
}
.col-reco h4 em,
.single-reco-area h4 em{
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #b21a40;
	color: #fff;
	text-align: center;
	line-height: 50px;
	font-size: 85%;
	margin-right: .5em;
}
.col-reco figure{
	width: 100%;
	background-color: #10b1f4;
}
.col-reco figure img{
	width: 100%;
}
.col-reco figcaption{
	background-color: #10b1f4;
	padding-bottom: .5em;
	color: #fff;
	text-align: center;
	font-size: 124%;
	font-weight: bold;
}
.col-reco figcaption small{
	display: block;
	font-size: 80%;
}
.col-reco dl{
	padding: 1em;
}
.col-reco dt{
	font-size: 112%;
	font-weight: bold;
	color: #10b1f4;
}
.col-reco dd{
	background: #f4f4f4;
	margin: 1em 0;
	padding: .6em 1em;
	font-size: 85%;
}
.col-reco dd span{
	display: block;
	padding-left: 1em;
	text-indent: -1em;
}
.single-reco-area{
	margin: 40px auto;
	box-shadow: 0 0 15px rgba(0,0,0,.1);
	margin-bottom: 130px;
	padding-bottom: 1em;
}
.single-reco-area p{
	font-size: 112%;
	font-weight: bold;
	color: #10b1f4;
	margin: -.5em 0 0 3em;	
}
@media screen and (min-width: 768px), print {
.grid-reco-area{
	display: flex;
	justify-content: space-between;
	width: 1080px;
	margin-bottom: 10px;
	}
.col-reco{
	width: 31.5%;
	}
.col-reco h4{}
.col-reco figure{}
.col-reco figcaption.space-2{
	padding-top: .7em;
	height: 2.2em
	}
.col-reco dl{}
.col-reco dt{}
.col-reco dd{}
.single-reco-area{
	width: 680px;
	margin: 0 auto 30px auto;
}
.single-reco-area p{
	margin-top: -1em;	
}
}