@charset "utf-8";
/*
Theme Name:DROP Child
Theme URI:https://tcd-theme.com/tcd087/
Description:WordPress theme "DROP" was developed for landing pages of start-up companies. The beautiful gradient design makes it memorable, and the data-driven graph and chart functions make it highly appealing.
Author:TCD
Author URI:https://tcd-theme.com/
Version:2.0.1
Text Domain:tcd-drop
Template:drop_tcd087
*/

/*--------------------------------------------------------------------
 画像を中央寄せにする
----------------------------------------------------------------------*/
.aligncenter > img {
	display: block;
	margin: 0 auto;
}

/*--------------------------------------------------------------------
 PCにだけスペースを追加する
----------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	.post_col_space {
	display: none;
}
}

/*--------------------------------------------------------------------
 アコーディオンFAQ
----------------------------------------------------------------------*/
.qa-list dl {
    position: relative;
    margin: 30px 0 0;
    cursor: pointer;
    border: 1px solid #DDD;
}
.qa-list dl:first-child {
  margin-top: 0;
}
.qa-list dl::after {
    position: absolute;
    top: 27px;
    right: 26px;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    transform: rotate(135deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}
.qa-list .open::after {
    transform: rotate(-45deg);
}
.qa-list dl dt {
    position: relative;
    margin: 0;
    padding: 20px 20px 20px 60px;
    font-weight: bold;
    background: #DDD;
}
.qa-list dl dt::before {
    font-size: 22px;
    line-height: 1;
    position: absolute;
    top: 20px;
    left: 20px;
    display: block;
    content: 'Q.';
    color: #3285bf;
}
.qa-list dl dd::before {
    font-size: 22px;
    line-height: 1;
    position: absolute;
    left: 20px;
    display: block;
    content: 'A.';
    font-weight: bold;
    color: #3285bf;
}
.qa-list dl dd {
    position: relative;
    margin: 0;
    padding: 20px 20px 20px 60px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}

@media screen and (max-width: 767px) {
 .qa-list dl {
    margin: 10px 0 0;
}
.qa-list dl:after {
    top: 20px;
    right: 20px;
    width: 7px;
    height: 7px;
}
.qa-list dl dt {
    padding: 16px 16px 16px 50px;
    font-size: 14px;
}
.qa-list dl dt::before {
    font-size: 14px;
    top: 20px;
    left: 20px;
}
.qa-list dl dd::before {
    font-size: 14px;
    left: 20px;
    margin-top: 5px;
}
.qa-list dl dd {
    margin: 0;
    padding: 16px 16px 16px 50px;
    font-size: 14px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}
}

/*------------------------------------------------------------
 PCで横並びスマホで縦並びデザイン
-------------------------------------------------------------*/
.contents {
    width: 100%;
    max-width: 1920px;
    margin: auto;
}
.contents img {
    width: 100%;
}
.text-center {
    text-align: center;
}
.flexbox {
    display: flex;
}
.box1 {
    width: 34%;
    height: 160px;
    margin: 0;
}
.box2 {
    width: 33%;
    height: 160px;
    margin: 0;
}
.box3 {
    width: 33%;
    height: 160px;
    margin: 0;
}
@media screen and (max-width: 767px) {
    .flexbox {
        display: block;
    }
    .flexbox .box1 {
        width: 100%;
        height: 120px;
        margin: 0 0;
    }
    .flexbox .box2 {
        width: 100%;
        height: 120px;
        margin: 0 0;
    }
    .flexbox .box3 {
        width: 100%;
        height: 120px;
        margin: 0 0;
    }
}

/*------------------------------------------------------------
 h1タグ見出しデザイン
-------------------------------------------------------------*/


/*------------------------------------------------------------
 h2、h3、h4タグ見出しデザイン
-------------------------------------------------------------*/
h2:not(.logo):not(.common_headline):not(.animate_item):not(.inview):not(.catch) {
	color: #00a73c;
	border-bottom: solid 3px #00a73c !important;
	padding: 0.2em 0.5em;
}

h2[id^="toc"], h3[id^="toc"], h4[id^="toc"] {
	padding: 0.25em 0.5em;			/*上右下左の余白*/
	background: transparent;		/*背景透明に*/
	border-left: solid 10px #00a73c;	/*左線*/
}

/*------------------------------------------------------------
 Font Awesome 5 アイコンを表示
-------------------------------------------------------------*/
/*サイドバータイトル前*/
.widget_headline::before {
	font-family: "Font Awesome 5 Free";
	content: '\f1ea';
	font-weight: 900;
	color: #20283f;	    		/*文字色*/
	padding-right: 5px;		/*文字との隙間*/
}

/*外部リンク後*/
a[target="_blank"]::after {
	font-family: "Font Awesome 5 Free";
	content: '\f35d';
	font-weight: 600;
	font-size: .5rem;
	color: #1e73be;	    		/*文字色*/
	padding-left: 5px;		/*文字との隙間*/
}

/*外部リンク後アイコンをつけない*/
.insta a[target="_blank"]::after, .twitter a[target="_blank"]::after, .facebook a[target="_blank"]::after, .youtube a[target="_blank"]::after, .contact a[target="_blank"]::after, .rss a[target="_blank"]::after, .pinterest a[target="_blank"]::after {
	display: none;
}

/*--------------------------------------------------------------------
 写真の角丸デザイン（PCしか対応せず）
----------------------------------------------------------------------*/
img[src$=""] {
	border-radius: 30px;		/* 角丸半径を指定する */
	width:  850px;
	height: 450px;
}

/*---------------------------------------------------------------------
 コメント欄のメルアドとURL入力欄を消す
-----------------------------------------------------------------------*/
/* メールアドレスとサイトのエリアをまとめて消すCSS */
#guest_email,
#guest_url {
	display:none;
}

/*---------------------------------------------------------------------
 コンタクトフォームのスタイル
-----------------------------------------------------------------------*/
.contact7 {
	font-weight: bold;
}
.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-email"],
.wpcf7 input[name="your-subject"] {
        width: 95%;
        height: 35px !important;
}
.wpcf7 textarea[name="your-message"] {
        width: 95%;
        height: 250px !important;
}
.contact7-must {
	width: 100%;
	padding: 1px 5px;
	margin-right: 5px;
	margin-top: 5px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #ff0000;
	color: #fff;
	font-weight: bold;
}
.contact7-free {
	width: 100%;
	padding: 1px 5px;
	margin-right: 5px;
	margin-top: 5px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background-color: #808080;
	color: #fff;
	font-weight: bold;
}
.contact7-submit {
	display: block;
	padding: 15px;
	width: 250px;
	background: #0080ff;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	border-radius: 2px;
	margin: 25px auto 0;
}
/*送信ボタンマウスホバー時*/
.contact7-submit: hover{
	background: #fff;
	color: #0080ff;
	border: 2px solid #0080ff;
}

/*---------------------------------------------------------------------
 ヘッダー固定・横スクロールテーブルレイアウト
-----------------------------------------------------------------------*/
/* table03 */

#table03 th, #table05 td {
  text-align: center;
  width: 20%;
  min-width: 130px;
  padding: 10px;
  height: 60px;
}

#table03 th {
  background-color: #f0f0f0;
}

#table03 .head {
  background-color: #e2e2e2;
}

/* tab */
@media only screen and (max-width: 768px) {
  #table03 {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
  }
  #table03 .fixed {
    position: sticky;
    left: 0;
  }
  #table05 .fixed:before {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    right: -1px;
    height: 100%;
    border-left: 1px solid #707070;
    border-right: 1px solid #707070;
  }
}


/*------------------------------------------------------------
 ロゴカルーセルスライダー
-------------------------------------------------------------*/
@media screen and (max-width: 767px) {
.d-demo {
	display: none;
	}
/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/

.d-demo__wrap {
  display: flex;
  overflow: hidden;
}

.d-demo__list {
  display: flex;
  list-style: none;
}

.d-demo__list--left{
animation :infinity-scroll-left 95s infinite linear 0.5s both;
}

.d-demo__item {
  width: calc(100vw / 6);
}
.d-demo__item > img{
   width: 100%;
}
}