@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ---------------------------------
Typography
--------------------------------- */
.article h2 {
  /* background-color: #fec008;
  color: #000; */
  font-size:24px;
}
.article h2 span{
  font-size:24px!important;
}
.article h3{
  /* border-left-color: #fec008; */
  font-size:20px;
}
.article h3 span{
  font-size:20px!important;
}
/* ---------------------------------
Base Parts
--------------------------------- */
p > img[style*="width"] {
  height: auto!important;
  width: auto!important;
}
.article table[style*='width']{
  table-layout: fixed;
}
.article table[style*='width'] td {
  padding:0;
}

/* ---------------------------------
Layout Flex Box
--------------------------------- */
.fen-flex {
  display: flex;
  flex-wrap: wrap;
}
.fen-flex__items__heading{
  font-size:1.2em;
  font-weight: 700;
}
/* Col 2 */
.fen-flex--col2__item {
  width: calc(50% - .5em);
  margin-bottom: 1em;
}
.fen-flex--col2__item:nth-child(2n+1) {
  margin-right: 1em;
}
.fen-flex--col2__item:nth-last-child(-n+2) {
  margin-bottom: 0;
}
@media screen and (max-width: 480px) {
  .fen-flex--col2__item {
    width: 100%;
  }
  .fen-flex--col2__item:not(:last-child) {
    margin: 0 0 1em;
  }
}
/* Horizontal */
.fen-flex--box-h__item{
  display: flex;
  flex-wrap: wrap;
}
.fen-flex--box-h__item > *{
  flex:0 0 50%;
}
.fen-flex--box-h__body{
  padding-left:1em;
}
@media screen and (max-width: 480px){
  .fen-flex--box-h__item > *{
    flex:0 0 100%;
  }
}
/* ---------------------------------
Layout Grid
--------------------------------- */
.fen-grid {
  display: grid;
  grid-gap:10px;
}
.fen-grid__body{
  padding:.5em .5em 0;
}
.fen-grid--col2{
  grid-template-columns: repeat(2, 1fr);
}
.fen-grid--col3{
  grid-template-columns: repeat(3, 1fr);
}
.fen-grid--col4{
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 600px){
  .fen-grid--col4,.fen-grid--col3{
    grid-template-columns: repeat(2, 1fr);
  }
  .fen-grid--col3-to-1{
    grid-template-columns: repeat(1, 1fr);
  }
}
/* ---------------------------------
Header
--------------------------------- */
#header-in{
  padding:10px 0;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#header-in::after{
  content:none;
}
#header-in .logo-header img{
  display: block;
}
#header-in .logo-image{
  flex:0 0 60px;
}
#header-in .logo-image a{
  display:block;
}
#header .site-name-text{
  display: block;
}
.header-text{
  text-align: right;
}
.header-functional-link{
  list-style: none;
  padding:0 .5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.header-functional-link__item{
  /* display:inline-block; */
  line-height: 1.4;
  font-weight: 700;
  font-size:0.9em;
}
.header-functional-link__item:not(:first-child):not(:last-child){
  margin-left:1rem;
  padding-left:1rem;
  border-left:1px solid rgba(255,255,255,.4);
}
.header-functional-link__item a{
  color:#fff;
  text-decoration: none;
}
.header-functional-link--language{
  margin-left:2.5rem;
  font-size:.7em;
  font-weight: 400;
}
.header-tex__tel{
  margin-right:.5rem;
  margin-bottom:5px;
}
.header-tex__tel--icon{
  display: none;
}
@media screen and (max-width: 1280px){
  #header-in{
    margin: 0 .5%;
  }
}
@media screen and (max-width: 834px){
  #header{
    border-bottom:10px solid #fec008;
  }
}
@media screen and (max-width: 480px){
  .header-text{
    display: flex;
    align-items: center;
  }
  .header-text a[href*='tel']{
    text-decoration: underline;
  }
  .header-tex__tel{
    display: none;
  }
  .header-tex__tel--icon{
    flex:0 0 44px;
    display: block;
    width: 44px;
    height:44px;
    margin-left:1rem;
    margin-right:10px;
  }
  .header-tex__tel--icon img{
    display: block;
  }
  .header-functional-link--language{
    flex:1 1 100%;
    margin-top:5px;
  }
}
/* ---------------------------------
Navigation
--------------------------------- */
/* Global navigation */
.navi-in > ul {
  justify-content: space-around;
}
.navi-in > ul li{
  font-weight: 700;
}
#navi .navi-in>ul>li{
  flex:1 1 16.6666%;
}
.navi-in a{
  font-size:15px;
}
#navi .navi-in>ul>li>a{
  padding:0;
}
@media screen and (max-width: 1000px){
  #navi .navi-in>ul>li{
    flex:1 1 auto;
  }
}
/* ---------------------------------
Pages
--------------------------------- */
/* Top Page */
.appeal-content{
  background-color:rgba(255,255,255,.6);
  max-width: 780px;
}
.fen-copy-mv{
  margin-bottom: .5em;
}

/* ---------------------------------
Button
--------------------------------- */
/* Button Simple type  */
.btn--0--wrap{
  display: flex;
  justify-content: flex-end;
}
.btn--0{
  border-radius: 3px;
  background-color: #5b509b;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .35), 1px 1px 5px 0 rgba(0, 0, 0, .2);
  line-height: 1.5;
  text-decoration: none;
  padding: .8em 25px .8em .8em;
  position: relative;
}
.btn--0:link,.btn--0:visited,.btn--0:hover,.btn--0:active{
  color:#fff;
}
.btn--0::after {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 0 6px 11px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  content: '';
}
@media (hover: hover) {
  .btn--0:hover,.btn--0:active{
    background-color:#6e63b3;
  }
}
/* Button Only text by box type */
.btn--1 {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1.3em 1em 1.3em 50px;
  border-radius: 3px;
  background-color: #f4f5f7;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .35), 1px 1px 5px 0 rgba(0, 0, 0, .2);
  line-height: 1.5;
  text-decoration: none;
  border:1px solid #fff;
}
.btn--1::before {
  position: absolute;
  top: 5px;
  left: -1px;
  display: block;
  width: 30px;
  padding-right: 6px;
  background-color: #5b509b;
  font-size: 12px;
  color: #fff;
  text-align: right;
  content: counter(num);
  border-left:1px solid #8a76ff;
}
.btn--1::after {
  position: absolute;
  right: 5px;
  bottom: 5px;
  border-width: 5px 0 5px 8px;
  border-style: solid;
  border-color: transparent transparent transparent #5b509b;
  content: '';
}
/* Button Box with image */
.btn--box1{
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  background-color: #f4f5f7;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .35), 1px 1px 5px 0 rgba(0, 0, 0, .2);
  line-height: 1.5;
  text-decoration: none;
  color:#333;
}
/* ---------------------------------
Scroll table
--------------------------------- */
.fen-scroll-table{
  overflow-x: auto;
}
.fen-scroll-table th{
  white-space: nowrap;
}
.btn--0--wrap{
  gap:1em;
}
.fen-scroll-table table{
  margin-bottom: 0;
}
/* ---------------------------------
Table of Contents
--------------------------------- */
.fen-tob {
  align-content: center;
  padding: 6px;
  border: 1px solid #e9e9e9;
  border-radius: 3px;
  background-color: #f4f5f7;
  font-size: 1rem;
  gap: 6px;
}
.fen-tob * {
  box-sizing: border-box;
}
.fen-tob>*:first-child {
  flex: 1 1 calc(33% - 6px);
}
.fen-tob>*:last-child {
  flex: 1 1 calc(67% - 6px);
}
.fen-tob__section1 {
  gap: 6px;
}
.fen-tob__section1>.fen-tob__item {
  width: calc(50% - 3px);
  text-align: center;
  background-color: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 3px;
  display: flex;
  /* flex-wrap:wrap; */
  justify-content: space-between;
  flex-direction:column;
  position: relative;
}
.fen-tob__section1>.fen-tob__item>*{
  /* flex: 1 1 100%; */
}
.fen-tob__image {
  position: relative;
  padding: 5px;
  height:100%;
  /* border-radius: 3px 3px 0 0; */
  /* aspect-ratio: 1/1; */
}
.fen-tob__image img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: calc(100% - 10px);
  transform: translate(-50%, -50%);
}
.fen-tob__image .logo-sino {
  max-width: 60%;
}
.fen-tob__image+div {
  padding: 3px 0;
  border-top: 1px solid #e9e9e9;
  /* border: 1px solid #e9e9e9; */
  /* border-top: 0;
  border-radius: 0 0 3px 3px;
  background-color: #fff; */
}
.fen-tob__section1 a::after{
  content:"";
  display: block;
  height:100%;
  width: 100%;
  position: absolute;
  top:0;
  left:0;
}
.fen-tob__section2 {
  justify-content: space-around;
  align-items: center;
  padding: 5px;
  border: 1px solid #e9e9e9;
  border-radius: 3px;
  background-color: #fff;
}
.fen-tob .fen-tob__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 5px 3%;
  grid-template-columns: repeat(2, minmax(13.5em, 1fr));
}
.fen-tob .fen-tob__list>* {
  margin: 0;
}
@media screen and (max-width: 1107px) and (min-width:1024px) {
  .fen-tob__image {
    aspect-ratio: 3/2;
  }
}
@media screen and (max-width: 723px) {
  .fen-tob{
    font-size:.9rem;
  }
  .fen-tob>*:first-child,
  .fen-tob>*:last-child {
    flex: 1 1 100%;
  }
  .fen-tob__image {
    aspect-ratio: 3/2;
  }
  .fen-tob__section2 {
    padding: 10px;
  }
}
@media screen and (max-width: 480px) {
  .fen-tob__image {
    aspect-ratio: 5/4;
  }
  .fen-tob .fen-tob__list {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* ---------------------------------
Unite
--------------------------------- */
/* To add teext link style */
.textlink{
  position: relative;
  display: inline-block;
  padding-left:1em;
}
.textlink::before{
  content:'\226B';
  position: absolute;
  left:0;
}
/* To add number */
.add-increment-num-wrap{
  counter-reset: num;
}
.add-increment-num {
  counter-increment: num;
}
/* Change Display */
.d-b{
  display: block;
}
/* Bottom of contents */
.article .cta-top-and-bottom__heading{
  background-color: #f5f6f7;
  margin-bottom: 1em;
  font-size: 20px;
  padding: 9px 10px;
  line-height: 1.25;
  font-weight: bold;
}
.article .cta-top-and-bottom__heading:not(:first-child){
  margin-top: 1.8em;
}
/* Card Type 1 */
.type-card1{
  border-radius: 3px;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .35), 1px 1px 5px 0 rgba(0, 0, 0, .2);
  line-height: 1.5;
  border:1px solid #fff;
  overflow: hidden;
  background-color: #f4f5f7;
}
/* CTA top and bottom */
.cta-top-and-bottom{
  color: #333;
  background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
  padding: 54px 10px;
  margin-left:-30px;
  margin-right:-30px;
}
.cta-top-and-bottom .cta-content{
  background-color: #fff;
  padding:20px;
  border-radius: 3px;
  max-width:692px;
  margin:0 auto;
}
.cta-top-and-bottom img{
 display:block;
}
.cta-top-and-bottom table{
  width:auto!important;
}
@media screen and (max-width: 834px){
  .cta-top-and-bottom{
    margin-left:-17px;
    margin-right:-17px;
  }
}
@media screen and (max-width: 480px){
  .cta-top-and-bottom{
    padding: 48px 10px;
  }
  .cta-top-and-bottom .cta-content{
    padding:10px;
  }
}
/* List */
.article ol li + li{
  margin-top:.5em;
}
/* List Simple */
.article .simple-list{
  list-style: none;
  padding: 0;
}
.article .simple-list li{
  padding: 5px 0;
  border-bottom:1px solid #bbb;
}
.article .simple-list li:first-child{
  border-top:1px solid #bbb;
}
/* List New entrise */
.article .list-news-entries{
  list-style: none;
  padding:0 1.5%;
}
.list-news-entries__item{
  display: flex;
  border-bottom: 1px dashed #999;
  padding:1.5% 0;
  line-height: 1.5;
}
.list-news-entries__date{
  flex:0 0 150px;
}
@media screen and (max-width: 834px){
  .list-news-entries__item{
    flex-wrap: wrap;
  }
  .list-news-entries__item >*{
    flex:0 0 100%;
  }
}
/* List Blog category link */
.article .list-blog-cat{
  list-style: none;
  padding-left: 0;
  font-size: 0;
}
.article .list-blog-cat__title{
  border:none;
  padding:0 0 0 5px;
  margin-bottom: .5em;
}
.list-blog-cat .cat-item{
  display: inline-block;
  font-size: 16px;
}
.list-blog-cat a{
  display: block;
  padding: 0.3em 2em;
  text-decoration: none;
  color: #333;
  border: solid 1px #ccc;
  border-radius: 99px;
  transition: .4s;
}
.list-blog-cat a:hover,.list-blog-cat a:active{
  background-color: #f5f8fa;
  transition: all 0.3s ease-in-out;
  color: #333;
}
@media screen and (max-width: 480px){
  .list-blog-cat .cat-item{
    font-size: 15px;
  }
}
/* List Posts in article tag by Cocoon parts  */
article .entry-card-title--in-article{
  border:none;
  padding:0;
  font-size:18px;
  line-height: 1.6;
  font-weight: 700;
  margin:0 0 5px;
}
@media screen and (max-width: 834px){
  article .entry-card-title--in-article{
    font-size:17px;
  }
}

/* For shortcode  */
.fen-shortcode-postlist .a-wrap{margin-bottom:.5rem;}

/************************************
** LP用
************************************/
.header-functional-link-lp1{
  display:flex;
  flex-wrap:nowrap;
  margin-right:0.5rem;
}
.header-functional-link-lp1>*{
  list-style: none;
}
.header-functional-link-lp1>*:not(:first-child){
  border-left: 1px solid #fff6;
  margin-left: 1rem;
  padding-left: 1rem;
}
.header-functional-link-lp1__item {
  font-size:.9em;
  line-height: 1.4;
  font-weight: 700;
}
.header-functional-link-lp1__item a {
  color: #fff;
  text-decoration: none;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}