@charset "UTF-8";

/**
Theme Name: Astra-Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* 
リセット
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 
共通項目
*/

body {
  font-family: sans-serif;
}

li {
  list-style-type: none;
  margin-left: 20px;
}

ul {
  display: flex;
}

.day-mode {
  background: #fae3d9 !important;
  ;
  color: #6d597a !important;
  ;


}

.night-mode {
  background: #1b1b2f !important;
  color: #e0e1dd !important;
}

#primary {
  padding: 4em 2.5em;
  margin: 0;
}


/* 
ヘッダー
*/
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-logo {
  width: 60px;
  display: block;
  margin: 0.5em 0.75em;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: auto;
}

/* 昼夜モードで切り替え*/
.main-nav.day-mode a {
  text-decoration: none;
  color: #6d597a;
  font-weight: 500;
  transition: color 0.3s;
}

.main-nav.day-mode a:hover {
  color: #ff686b;
}

.main-nav.night-mode a {
  text-decoration: none;
  color: #e0e1dd;
  font-weight: 500;
  transition: color 0.3s;
}

.main-nav.night-mode a:hover {
  color: #6a057b;
}

h2.night-mode {
  color: #7B6A05;
}


/* 
投稿一覧
*/
.archive .ast-article-post .ast-article-inner,
.blog .ast-article-post .ast-article-inner,
.archive .ast-article-post .ast-article-inner:hover,
.blog .ast-article-post .ast-article-inner:hover {
  background-color: #fff;
}

.ast-grid-common-col {
  text-align: center;
}


/* 
TOPの動画
*/
.video-outline {
  width: 100vw;
  height: 120vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.video-outline::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: #10394b;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .3;
}

.video-outline video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* ビデオ */
.filter {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.filter .site-title {
  color: #fff;
  font-size: 90px;
  font-weight: bold;
  text-align: center;
  line-height: 1.4em;
  letter-spacing: .2em;
}

.night-video,
.morning-video {
  width: 100vw;
}


/* 
TOP
*/
.site-content {
  padding: 2% 2% 0% 2%;
}

/* カルーセル */
.genre-carousel {
  width: 100%;
  margin: 30px auto;
}

.genre-slide {
  text-align: center;
}

.genre-slide img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.genre-name {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  font-size: 1rem;
}


/* 
プロフィール(TOP)
*/
.top-profile-row {
  display: flex;
  align-items: center;
  margin: 3% 0%;
}

.top-profile-img-outline {
  width: 300px;
}

.top-profile-img-outline img {
  border-radius: 300px;
  width: 200px;
}

.top-prof-detail-outline {
  margin-top: 1em;
}

.detail-btn-outline {
  margin: 2em 0;
}

.detail {
  width: 200px;
}

/* 
プロフィール(詳細)
*/
#primary {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.profile-outline {
  display: block;
}

.profile-row {
  display: flex;
}

.profile-img-outline {
  width: 300px;
  /*float: left; */
  margin-top: 5%;
}

.profile-img-outline img {
  border-radius: 300px;
  width: 200px;
}

.profile-detail {
  width: 100%;
  padding: 20px;
}

.profDetail-h4-night-mode-emphasis {
  color: #7B6A05 !important;
}

.profDetail-h3-night-mode-emphasis {
  color: #E0FFFE !important;
}

.profDetail-h4-day-mode-emphasis {
  color: #ff686b !important;
}

.profDetail-h3-day-mode-emphasis {
  color: #3E9997 !important;
}

.night-mode-emphasis {
  color: #7B6A05;
}

.day-mode-emphasis {
  color: #ff686b;
}

ul.career {
  display: block;
}

.career {
  position: relative;
  padding-left: 40px;
  /* 縦線と丸用のスペース */
  margin: 40px 0;
  border-left: 3px solid #fff;
  /* デフォルト夜モード色 */
}

.career>li {
  margin-bottom: 60px;
  margin: 0;
  position: relative;
}


.career-date {
  width: 110px;
  flex-shrink: 0;
  margin-right: 20px;
}

.career li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
  position: relative;
  padding-left: 20px;
  /* 丸マーカー分のスペース */
}

/* 丸の位置修正＆昼夜モード対応 */
.career li::before {
  content: '';
  position: absolute;
  left: -29px;
  top: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  /* 夜モード丸 */
}

.day-mode .career li::before {
  background: #ff686b;
}

.night-mode .career li::before {
  background: #6a057b;
}

.career-content {
  flex: 1;
}

.career-content:before h3 night-mode-emphasis {
  background: #6a057b;
}

.career-content:before h3 day-mode-emphasis {
  background: #ff686b;
}



/* WORKS */
.works-outline {
  margin: 3% 0%;
}

body.archive .ast-archive-description {
  padding-top: 1em;
  padding-bottom: 1em;
}

.ast-archive-description {
	text-align: center;
	padding-top:initial;
	padding-bottom:initial;
	padding-right:initial;
	padding-left:initial;
}

.attachment-large.size-large.wp-post-image {
  width: 100%;
  height: 250px;
  /* 統一したい高さを指定（例：250px） */
  object-fit: contain;
  /* ズームせず全体表示 */
  background-color: #fff;
  /* 背景は白に統一 */
  display: block;
  margin: 0 auto;
}

/* サムネイルの調整*/
.wp-post-image {
  object-fit: cover;
}

.work-list-cat-links,
.tags-list-tags-links {
  border-radius: 30px;
  text-align: center;
  width: 45%;
  padding: 1%;
  display: inline-block;
  margin: 0 0 1em 1em;
}

.work-list-cat-links.night-mode-emphasis,
.tags-list-tags-links.night-mode-emphasis {
  background: #6a057b;
}

.work-list-cat-links.day-mode-emphasis,
.tags-list-tags-links.day-mode-emphasis {
  background: #ff686b;
}


.work-list-cat-links a,
.tags-list-tags-links a {
  color: #fff;
}

.published {
  color: #6d597a;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 447px;
  text-align: center;
}

.item-name {
  text-align: center;
  font-size: x-large;
}

/* 詳細ページ*/
.blog-title,
.blog-main,
.in-charge,
.ingenuity,
.soft,
.time {
  text-align: center;
}

.blog-title {
  margin-bottom: 1em;
}


#primary img {
  margin: 0 auto;
}

.nav-links {
  display: flex;
  justify-content: space-between;
}

/* ページャー*/
.post-page-numbers.current.day-mode,
.page-numbers.current.day-mode {
  background: #ff686b !important;
  color: #fff !important;
  border-color: initial;
}

a.post-page-numbers.day-mode,
a.page-numbers.day-mode {
  color: #6d597a !important;
}

.post-page-numbers.current.night-mode,
.page-numbers.current.night-mode {
  background: #6a057b !important;
  color: #e0e1dd !important;
  border-color: initial;
}

a.post-page-numbers.night-mode,
a.page-numbers.night-mode {
  color: #e0e1dd !important;
}

.prev-link .day-mode:hover,
.next-link .day-mode:hover {
  color: #ff686b !important;
}

.prev-link .night-mode:hover,
.next-link .night-mode:hover {
  color: #7B6A05 !important;
}


/* 
Service
*/
.service-outline {
  margin: 3% 0%;
}

/* 
問い合わせ
*/

.contact-outline {
  margin: 3% 0%;
}

.form-row-outline {
  display: flex;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid #fff;
}

.label-outline {
  flex: 0 0 30%;
  align-items: center;
}

.input-outline {
  width: 100%;
}

.required {
  background: red;
  color: #fff;
  margin-right: 0.5em;
  padding: 0.5%;
}

.submit-outline {
  text-align: center;
  padding: 1%;
}

.submitbtn {
  width: 200px;
}

.submitbtn:hover {
  opacity: 0.5;
}

.submitbtn.night-mode-emphasis {
  background: #6a057b;
  color: #fff;
}

.submitbtn.day-mode-emphasis {
  background: #ff686b;
  color: #fff;
}



/* 確認画面*/
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container,
.comp-modal-container {
  /*position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 50%);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
  */
  display: none;
  /* 初期は非表示 */
  opacity: 0;
  visibility: hidden;
}

/*モーダル本体の擬似要素の指定*/
.modal-container:before,
.comp-modal-container:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active,
.comp-modal-container.active {
  /*opacity: 1;
  visibility: visible;*/
  display: block;
  /* 表示時に block */
  opacity: 1;
  visibility: visible;
}

/*モーダル枠の指定*/
.modal-body {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 500px;
  width: 90%;
}

/*モーダルを閉じるボタンの指定*/
.modal-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -40px;
  right: -100px;
  width: 40px;
  height: 40px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}

/*モーダル内のコンテンツの指定*/
.modal-content {
  text-align: left;
  padding: 30px;
  width: 600px;
}

.modal-content h4 {
  text-align: center;
}

#modal-company,
#modal-name,
#modal-tel,
#modal-email,
#modal-msg {
  margin: 0;
}

#modal-msg {
  overflow-wrap: break-word;
}


/* 
フッター
*/
.footer-outer {
  padding-bottom: 1em;
  padding-top: 1em;
  padding: 30px;
  align-items: center;
}

.copy-right {
  text-align: center;
}

.sns-ul {
  color: inherit;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: .5em 0 1em;
  margin: 0 auto;

}

.footer-link {
  display: block;
}

.x-icon,
.insta-icon,
.fb-icon,
.git-icon {
  height: 30px;
  width: auto;
  max-width: 30px;
}


@media (min-width:320px) and (max-width:480px) {
  /*　for iPhone Landscape　(iPhone 横)　*/

  .site-header {
    padding: 1em;
  }


  /* メニューのスタイル */
  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    /* 初期状態では画面の外に隠れている */
    width: 300px;
    height: 100%;
    background-color: #fafad2;
    color: #333;
    transition: right 0.3s ease;
    /* スライドインのアニメーション */
    padding: 20px;
    box-sizing: border-box;
    z-index: 10;
  }

  /* メニューが開いているとき */
  .main-nav.open {
    right: 0;
  }

  /* ボタンのスタイル */
  .hamburger {
    position: fixed;
    top: 30px;
    right: 20px;
    width: 30px;
    cursor: pointer;
    z-index: 20;
  }

  .hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #333;
    margin: 5px 0;
    transition: 0.4s;
  }

  /* バツ印に変化するスタイル */
  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }

  /* メニューリストのスタイル */
  .main-nav ul {
    list-style-type: none;
    padding: 0;
    margin-top: 80px;
    display: block;
  }

  .main-nav li {
    padding: 20px 0;
    border-bottom: 1px solid #444;
  }

  .main-nav li a {
    color: #333;
    text-decoration: none;
    display: block;
  }


  .video-outline,
  .filter {
    min-width: 375px;
  }

  .filter .site-title {
    font-size: 60px;
  }

  .top-profile-row {
    display: block;
  }


  .detail-btn-outline {
    text-align: center;
  }




  /* 
  プロフィール
*/
  .profile-row {
    display: block;
    /* margin: 0 auto; */
  }

  .profile-img-outline {
    float: initial;
    margin: 0 auto;
  }

  .top-profile-img-outline {
    margin-left: auto;
  }

  .top-profile-img-outline img {
    margin: 0 auto;
  }

  .career {
    padding-left: 20px;
    /* スマホは少し詰める */
  }

  .career li {
    padding-left: 15px;
    margin-bottom: 30px;
  }

  .career li::before {
    left: -25px;
    top: 10px;
    width: 12px;
    height: 12px;
  }

  .career-date {
    font-size: 14px;
  }

  .career-content h3 {
    font-size: 16px;
  }
}

/* WORKS*/
.work-list-cat-links,
.tags-list-tags-links {
  width: 60%;
}

/* 
お問い合わせ
*/
.form-row-outline {
  display: block;
  padding: 0;
}

.label-outline {
  display: block;
  flex: initial;
  padding: 3% 0;
}

.form-row-outline {
  border-bottom: initial;
}

/* 
モーダルウィンドウ
*/
.modal-body {
  max-width: 300px;
}

.modal-close {
  right: -40px;
}

.modal-content {
  width: auto;
}


}