@charset "UTF-8";

/*!
Theme Name: Okinawa Drone
Description: 沖縄ドローンステーションテーマ
Theme URI: https://wp-cocoon.com/
Author: risv
Author URI: https://risv.net/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


/************************************
** ★★★テーマ全体共通スタイル★★★

************************************/


/************************************
** ヘッダーロゴ
************************************/

/* https://komugi-rainyday.com/header-css-customize/　参照 */


/* ヘッダーロゴ */
.logo-header img {
	padding: 0.25vh 0;
	object-fit: cover;
}

.logo-menu-button img {
	padding: 0 0 0.25vh;
	object-fit: cover;
}


/************************************
** 各ページタイトル
************************************/

/* https://osaifull.com/wordpresstitle-1949.html　参照 */

.entry-title {
	margin: 3vh; 0;
	padding: 0;
	text-align: center;
	font-size: 3rem;
	font-weight: 800;
}


/************************************
** ブログカード
************************************/
/* https://ikuzoblog.com/blogcard-customization　参照 */

/* 内部ブログカード */
.internal-blogcard {
	margin: auto;
	max-width: 450px;
	border-radius: 1vh;
/* 	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); */
}


/************************************
** SNS ボタンをまとめて小さくする
************************************/
/* https://www.satokobo.net/cocoon/1243　参照 */
/*トップシェアボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons {
	justify-content: flex-end; /*右に寄せる*/
}

/*ボトムシェア・フォローボタンの枠組み*/
.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
	justify-content: center; /*中央に寄せる*/
	flex-wrap: wrap; /*折り返す*/
}

/*シェア・フォローボタンのリンク*/
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
	width: 80px; /*横幅*/
	height: 56px; /*高さ*/
	margin-right: 1rem; /*右側の余白*/
	margin-left: 1rem; /*左側の余白*/
	border-radius: 1vh; /*丸み*/
}

/*シェアボタンのアイコン*/
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
	font-size: 16px; /*アイコンの大きさ*/
}

/*フォローボタンのアイコン*/
.sns-follow.sf-bottom .sns-follow-buttons .follow-button,
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
	font-size: 40px; /*アイコンの大きさ*/
}

/*シェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/*シェア・フォローボタンのシェア数*/
.sns-share.ss-top .sns-buttons a .share-count,
.sns-share.ss-bottom .sns-buttons a .share-count,
.sns-follow.sf-bottom .sns-buttons a .follow-count,
.sns-follow.sf-widget .sns-buttons a .follow-count {
	right: 1px; /*右側からの距離*/
	bottom: 0; /*下側からの距離*/
	font-size: 10px; /*文字の大きさ*/
}

/* Instagramボタン色反映 */
.instagram-button {
	background: linear-gradient(45deg,#FFDD83, #F26939 30%, #CF2E92 60%, #4C64D3);
}


/************************************
** フッター上部投稿ページリンク
************************************/

.author-info {
  display: none;
}



/************************************
** ★★固定ページ共通スタイル★★

************************************/
/* 固定ページタイトル */
.page .entry-title {
  display: none;
}

.page .container_okidro {
  max-width: 1000px;
  width: 92%;
  margin: 0 auto;
}

/* クラスセレクタだと優先されないのでidセレクタ */
.page #h2_okidro {
  margin-bottom: 3vh;
  padding: 0;
  background-color: rgba(255, 255, 255, 0);
  text-align: center;
  font-size: 3rem; font-size: clamp(2.25rem, 1.618rem + 2.697vw, 3rem);
  font-weight: 800;
}

/* クラスセレクタだと優先されないのでidセレクタ */
.page #h3_okidro {
  margin-bottom: 2vh;
  padding: 0;
  border: none;
  text-align: center; 
  font-size: 2rem; font-size: clamp(1.375rem, 0.848rem + 2.247vw, 2rem);
  font-weight: 600;
}

/* クラスセレクタだと優先されないのでidセレクタ */
.page #hr_okidro {
  margin: 0;
}

.page .bg_color {
  border-radius: 1.25vh;
}

.page .bg_Shape {
  background-color: rgba(255, 255, 255, 0.75);
}

/* ボタン */
/* https://qiita.com/praz1/items/765ba09a166d1e0a850b 参照 */
.page .btn {
  max-width: 240px;
  box-shadow: 0 0.5rem 0 rgba(189, 17, 17, 0.9);
  font-size: 1.25rem;
}

.page .btn:active {
  box-shadow: none;
  transform: translateY(0.5rem);
/*   position: relative;
  top: 0.5rem; */
}

/************************************
** ★topページ共通スタイル★

************************************/
.home img {
  object-fit: cover;
}

.home section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 6vh 0;
}


/* Top movie */
body #appeal div#appeal-in {
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
/* add 20230915 */
div#appeal-in.wrap {
	width: 100%;
}
/* add 20230915 */
.appeal-content {
  background: rgba(255,255,255,0);
}
/* change 20230915 */
.movie {
  background: url(image/static_kuba_15sec.png) no-repeat center center;
  background-size: cover;
  height: inherit;
  overflow: hidden;
	/* max-height: 650px; */
	width: 100%;
}
video {
  min-width: 100%;
  min-height: 100%;
}
/* add 20230915 */
#appeal {
  position: relative; 
  background-image: none;
}


/* 背景画像利用箇所 ぼかし明度 */
.home .filter {
  margin-bottom: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  overflow: hidden; z-index: 0;
}

.home .filter::before{
  content: '';
  position: absolute;
  background: inherit;
  -webkit-filter: blur(5px) brightness(0.8);
  -moz-filter: blur(5px) brightness(0.8);
  -o-filter: blur(5px) brightness(0.8);
  -ms-filter: blur(5px) brightness(0.8);
  filter: blur(5px) brightness(0.8);
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
}


/************************************
** licence
************************************/
.home .licence .cards {
  display: grid;
  row-gap: 135px;
  padding: 0 0 6vh;
}

.home .licence .cards-row {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 40px;
  grid-template-rows: auto auto auto;
  row-gap: 20px;
}
@media (min-width: 768px) {
  .home .licence .cards-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home .licence .card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  margin-bottom: 36px;
}
@media (min-width: 768px) {
  .home .licence .card {
    margin-bottom: unset;
  }
}

.home .licence .card-title { 
  grid-row: 1;
  margin: 0;
  display: grid;
  place-items: center;
  text-align: center;
  align-self: stretch;
}

.home .licence .card-text { 
  grid-row: 2;
  margin: 0;
  display: grid;
  place-items: center;
  text-align: center;
  align-self: stretch;
}

.home .licence .card-btn { 
  grid-row: 3;
  text-align: center;
}

/************************************
** flow
************************************/
.home .flow { 
  padding: 0 0 6vh;
}

.home .flow section { 
  padding: 0px;
  border: 1px solid rgb(51, 51, 51);
}

.home .flow h3, .home .flow p { 
  margin-bottom: 0;
}

.home .flow h2 {
  background-color: unset;
  text-align: center;
  margin-bottom: 3vh;
}
@media (min-width: 768px) {
  .home .flow h2 {
    font-size: clamp(2.25rem, 1.618rem + 2.697vw, 3rem);
  }
}

.home .flow h3 { 
  text-align: center;
  background-color: rgb(51, 51, 51);
  color: rgb(255, 255, 255);
  border: unset;
}
@media (min-width: 768px) {
  .home .flow h3 { 
    font-size: clamp(1.375rem, 0.848rem + 2.247vw, 2rem);
  }
}

.home .flow p { 
  line-height: 1.5;
}
@media (min-width: 768px) {
  .home .flow p { 
    text-align: center;
  }
}

.home .flow .font-size--20 {
  font-size: 14px;
}
@media (min-width: 768px) {
  .home .flow .font-size--20 {
    font-size: 20px;
    line-height: 1.25;
  }
}

.home .flow .font-size--24 {
  font-size: 14px;
}
@media (min-width: 768px) {
  .home .flow .font-size--24 {
    font-size: 24px;
  }
}

.home .flow .dips-body, .home .flow .card-body, .home .flow .register-body {
  padding: 8px;
  font-weight: 900;
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .home .flow .dips-body, .home .flow .card-body, .home .flow .register-body {
    font-size: 32px;
  }
}

.home .flow .cards-row { 
  display: flex;
  justify-content: space-around;
  gap: 10px;
}
@media (min-width: 768px) {
  .home .flow .cards-row { 
    gap: 24px;
  }
}

.home .flow .arrow i { 
  font-size: 36px;
  color: gray;
}

.home .flow .card { 
  width: 100%;
  display: flex;
  flex-direction: column;
}

.home .flow .card:last-child p { 
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home .flow .card.obtain-certificate { 
  background-color: rgba(189, 17, 17, 0.9);
  color: rgb(255, 255, 255);
  border: 1px solid rgba(189, 17, 17, 0.9);
  border-radius: 8px;
}

.home .flow .register-body { 
  text-align: center;
}

/************************************
** schoolセクション
************************************/
.home #school {
  padding-bottom: 5vh;
}

.home #school h2 {
  margin-bottom: 0;
}

.home #school h2 > b {
  font-size: 2.75rem;
  font-size: clamp(2.75rem, 6vw, 4rem);
  font-weight: 900;
}

.home #school hr {
  margin: 2vh 0 4vh;
  height: 1vh;
  background-color: black;
}

.home #school .column-wrap {
  margin: 0 auto;
}

.home #school .column-wrap > div {
  width: 100%;
}

.home #school img {
  width: 95%;
  min-height: 334px;
  border-radius: 1.25vh;
}

.home #school ul {
  background-color: rgba(255, 255, 255, 0);
  width: 95%;
  min-height: 334px;
  position: relative;
  border: 1px solid gray;
  padding: 14px 2%;
  margin: auto;
  list-style:none;
  font-size: 1.15rem;
  font-weight: 600;
}

.home #school li {
  margin: 0 0 0.5vh;
  padding-left: 1.5rem;
}

.home #school .card li::before {
  content: "\02713";
  color: red;
  position:  absolute; 
  left: 2%;
}

.home #school ul > li > small {
  display: block;
  font-size: 0.75rem;
}



/************************************
** postセクション
************************************/

.home #post h2 {
  margin: 3vh 0 2.75vh;
}

.home #post > .post_news {
  margin: 0 0 2.75vh;
}

/* カスタム投稿スタイル */
.home #post .su-posts {
	display: flex;
	/* justify-content: center; */
  /* justify-content: space-around; */
  justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}

.home #post .su-posts::after{
  content:"";
  display: block;
  margin: 0 auto 18px;
  width: 450px;
}

.home #post .su-posts > div {
	margin: 0 auto 18px;
  /* margin: 0 clamp(0.5rem, -0.369rem + 3.708vw, 1.531rem) 18px; */
	width: 450px;
  height: 210px;
  overflow: hidden;
	padding: 1.6% 2.2% 2%;
	border-color: var(--cocoon-three-d-border-colors);
  border-width: 1px;
  border-style: solid;
	border-radius: 1vh;
}

.home #post .su-posts > div > h2 {
  margin: 0 auto;
	text-align: center;
}

.home #post .su-post-excerpt {
  height: 50px;
  overflow: hidden;
}

.home #post .su-posts > div p {
  font-size: 1rem;
  font-size: clamp(0.75rem, 0.539rem + 0.899vw, 1rem);
}


.home #post .request_btn {
  margin: 1vh 0 2vh;
  text-align: center;
}

.home #post .bg_color {
  background-color: #46ccdb;
  width: 92%;
  margin: 6vh auto 0;
  padding: 2.5vh 4%;
  text-align: center;
  line-height: 1.5rem;
}

.home #post .bg_color > h3 {
  margin-bottom: 1.5vh;
  color: white;
  font-size: 2rem;
  font-size: clamp(1.875rem, 1.348rem + 2.247vw, 2.5rem);
}

.home #post .bg_color > p {
  display: inline-block;
  margin-bottom: 0;
  font-size: 1rem;
  font-size: clamp(1rem, 0.789rem + 0.899vw, 1.25rem);
}

.home #post .bg_color > p > small {
  font-size: 0.75rem;
  font-size: clamp(0.75rem, 0.539rem + 0.899vw, 1rem);
}

.home #post .bg_color > div {
  margin: 2vh auto;
  text-align: center;
}



/************************************
** subsidyセクション
************************************/

.home #subsidy > h2 > b {
  display: inline-block;
  padding-top: 1vh;
  font-size: 1.75rem;
  font-size: clamp(1.375rem, 1.059rem + 1.348vw, 1.75rem);
}



/************************************
** new_menuセクション
************************************/

.home #new_menu h2 {
  font-size: 3rem;
  font-size: clamp(2.188rem, 1.503rem + 2.921vw, 3rem);
}

.home #new_menu > p {
  max-width: 90%;
  margin: auto;
  padding: 0 0 1vh;
  text-align: left;
}

.home #new_menu > p > b {
  color: red;
}

.home #new_menu .column-wrap {
  margin: 0 auto;
}

.home #new_menu .column-wrap img {
  max-height: 50vh;
  border-radius: 1.5vh;
}

.home #new_menu .column-wrap p {
  max-width: 90%;
  margin: auto;
  padding: 1vh 0;
  text-align: left;
}

.home #new_menu .inquiry_btn {
  margin-top: 1vh;
  text-align: center;
}



/************************************
** marketセクション
************************************/

.home #market .column-wrap {
  margin: 2vh auto;
}

.home #market .column-wrap > figure {
  max-width: 480px;
  margin: 1vh auto;
  padding: 1vh 1vw;
  border: solid 1px black;
}

.home #market figcaption {
  text-align: center;
}

.home #market p {
  margin-bottom: 1vh;
}

.home #market small {
  display: block;
  text-align: right;
}



/************************************
** reasonセクション
************************************/

.home .bg_image_reason {
  background-image: url('/wp-content/themes/okidrone-cocoon-child/images/drone8.jpg');
}

.home #reason h2 {
  color: white; text-shadow:0px 0px 5px #574000;
}

.home #reason h2 > b {
  font-size: 3.75rem; font-size: clamp(2.75rem, 1.907rem + 3.596vw, 3.75rem);
}

.home #reason .bg_color {
  margin: 0 auto 1.25rem; padding: 1.25rem;
}

.home #reason .bg_color > h3 {
  color: #46ccdb;
}

.home #reason p {
  margin-bottom: 0;
  font-size: 1rem;
}

.home #reason .column-wrap {
  margin: 0 auto;
}

.home #reason .column-wrap > div {
  margin: 0;
}

.home #reason .column-wrap > div > div {
  min-height: 305px;
}



/************************************
** requestセクション
************************************/

.home #request > h2 {
  font-size: 3rem;
  font-size: clamp(2.188rem, 1.503rem + 2.921vw, 3rem);
}

.home #request > h3 {
  font-size: 1.25rem;
  font-size: clamp(1rem, 0.789rem + 0.899vw, 1.25rem);
  font-weight: 400;
  color: #ff0000;
}

.home #request p {
  margin: 0;
  padding: 0; 
}

.home #request_box {
  border: solid 1px black;
  margin: 1vh 0 2vh;
  padding: 1vh 1vw 2vh;
}

.home #request > #request_box > p {
  margin-top: 1vh;
}

.home #request i {
  color: #ff0000;
}

.home #request u > i {
  font-weight: 400;
}

.home #request u {
  display: block;
  margin: 2vh 0 1vh;
  font-weight: 700;
}

.home #request small {
  display: block;
  margin-right: 1vw;
  vertical-align: top;
  text-align: right;
}


.home #request2 {
  padding-top: 5.5vh;
}

.home #request2 b {
  font-size: 1.5rem;
  font-size: clamp(1.25rem, 1.039rem + 0.899vw, 1.5rem);
}

.home #request2 > .bg_color {
  background-color: #46ccdb;
  margin: 2vh auto;
  padding: 2vh 2vw;
  text-align: center;
  color: white;
}

.home #request2 h3 {
  margin: 1.5vh auto 0;
  font-size: 2rem;
  font-size: clamp(1.75rem, 1.118rem + 2.697vw, 2.5rem);
}



/************************************
** skillセクション
************************************/

.home .bg_image_skill {
  background-image: url('/wp-content/themes/okidrone-cocoon-child/images/drone3.jpg');
}

.home #skill h2 {
  margin-bottom: 2vh;
  color: white;
  font-size: 3rem;
  font-size: clamp(2rem, 1.157rem + 3.596vw, 3rem);
  text-shadow:0px 0px 5px #134f87;
}

.home #skill > .container_okidro > p {
  text-align: center;
  margin-bottom: 2vh;
  color: white;
  font-size: 1.25rem;
  font-size: clamp(1rem, 0.789rem + 0.899vw, 1.25rem);
  text-shadow:0px 0px 3px #134f87;
}

.home #skill .bg_color {
  min-height: 295px;
  margin: 0 auto 1.25rem;
  padding: 1.5rem;
  display: flex;
  flex-wrap: wrap;
}

.home #skill img {
  width: 340px;
  height: 227px;
  margin: 0 auto 0.5vh;
}

.home #skill .bg_color > p {
  max-width: 550px;
  margin: 0 auto;
}

.home #skill .bg_color > p > b {
  margin-bottom: 0.5rem;
  color: #46ccdb;
  font-size: 1.5rem;
  font-size: clamp(1.25rem, 0.934rem + 1.348vw, 1.625rem);
  font-weight: 600;
}



/************************************
** course_introductionセクション
************************************/

.home .bg_image_course_introduction {
  background-image: url('/wp-content/themes/okidrone-cocoon-child/images/drone1.jpg');
}

.home #course_introduction {
  text-align: center;
}

.home #course_introduction h2 {
  color: white;
  text-shadow:0px 0px 5px #34323b;
}

.home #course_introduction > .container_okidro > .bg_color {
  margin: 0 auto;
  padding: 2vh 3%;
}

.home #course_introduction h3 {
  margin: 0;
  font-size: 1.5rem;
  font-size: clamp(1.313rem, 1.154rem + 0.674vw, 1.5rem);
}

.home #course_introduction h3 > small {
  display: block;
  margin-top: 0.25vh;
  font-size: 1.25rem;
  font-size: clamp(1rem, 0.789rem + 0.899vw, 1.25rem);
}

.home #course_introduction .price {
  display: block;
  margin: 0 0 1vh;
  color: red;
  font-size: 2.5rem;
  font-size: clamp(2rem, 1.579rem + 1.798vw, 2.5rem);
  font-weight: 900;
}

.home #course_introduction .column-wrap {
  margin: 0;
}

.home #course_introduction .column-wrap .bg_color {
  border: solid 2px black;
  margin: 0 auto;
  max-width: 480px;
/*   min-height: 280px; */
  padding: 15px clamp(0.625rem, 3vw, 2.438rem);
}

.home #course_introduction .column-wrap .bg_color > h4 {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0;
  border: none;
  font-size: 1.75rem;
  font-weight: 600;
}

.home #course_introduction .column-wrap .bg_color > p {
  text-align: left;
  font-size: 1rem;
  font-size: clamp(0.875rem, 0.818rem + 0.242vw, 1rem);
}

.home #course_introduction b {
  display: block;
  margin: 1vh 5vw;
  font-size: 1rem;
  font-size: clamp(0.875rem, 0.818rem + 0.242vw, 1rem);
}

.home #course_introduction > .container_okidro > .bg_color > p {
  margin: 0;
  color: red;
  font-size: 1.25rem;
  font-size: clamp(1rem, 0.789rem + 0.899vw, 1.25rem);
}



/************************************
** accessセクション
************************************/
.home .access {
  padding: 6vh 0 3vh;
  line-height: 1.5;
}

.home .access iframe {
  width: 1000px;
  height: 450px;
  margin: 0 auto 3vh;
  border: 0;
}

.home .access > p {
  margin-bottom: 0;
  text-align: center;
}

.home .access .cards {
  display: grid;
  row-gap: 135px;
  padding: 0;
}

.home .access .cards-row {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 40px;
  grid-template-rows: auto auto auto;
  row-gap: 10px;
}
@media (min-width: 992px) {
  .home .access .cards-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 16px;
    margin-bottom: 36px;
  }
}

.home .access .card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  margin-bottom: 36px;
}
@media (min-width: 992px) {
  .home .access .card {
    margin-bottom: unset;
  }
}

.home .access .card-iframe { 
  grid-row: 1;
  margin: 0;
}

.home .access .card-text { 
  grid-row: 2;
  margin: 0;
  display: grid;
  place-items: center;
  align-self: stretch;
}

.home .access .card-address { 
  grid-row: 3;
  margin: 0;
  text-align: center;
  align-self: stretch;
}

/************************************
** ★問い合わせページ共通スタイル★

************************************/
.page-id-68 #inquiry_page > p {
  text-align: center;
  font-weight: 800;
}

.page-id-68 #inquiry_page > p > span {
  font-size: 1rem;
  color: #ff0000;
}

.page-id-68 #inquiry_page > div {
  max-width: 650px;
  margin: auto;
}


/************************************
** ★★カスタム投稿ページ共通スタイル★★

************************************/
.news-template-default #main, .column-template-default #main, .schedule-template-default #main {
  max-width: 1000px;
	margin: auto;
}



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

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

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