/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* =====================================
Base
===================================== */
body {
	padding:0;
	margin:0;
}

font-family: "Yu Gothic", "游ゴシック体", "YuGothic", sans-serif;


/* =====================================
Elementor 共通調整
===================================== */
.elementor-element ul {
	padding-left:1rem;
}


/* =====================================
SPのみ改行制御
===================================== */
.text-block .br-sp {
  display: inline;
}

@media screen and (min-width: 768px) {
  .text-block .br-sp {
    display: none;
  }
}


/* =====================================
ボタン装飾
===================================== */
.read-more-button .elementor-button {
  position: relative;
}

.read-more-button .elementor-button::after {
  content: "";
  position: absolute;
  right: -1.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-image: url('/wp/wp-content/themes/hello-theme-child-master/img/button-icon.png');
  background-size: cover;
  background-position: center;
}


/* =====================================
ページヘッダー / セパレートライン
===================================== */
.page-head {
    position: relative:
}

.page-head .separator-line {
background: transparent linear-gradient(92deg, var(--white) 0%, #D9D6FF 8%, #B5D0DD 31%, #829696 59%, #EBEBEB 74%, #97B7CB 88%, #CECECE 100%) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(92deg, #FFFFFF 0%, #D9D6FF 8%, #B5D0DD 31%, #829696 59%, #EBEBEB 74%, #97B7CB 88%, #CECECE 100%) 0% 0% no-repeat padding-box;
opacity: 1;
}

/* =====================================
ヘッダータイトル調整
===================================== */
.header-title-deco  {
	position:relative;
}


/* =====================================
ハンバーガーボタン
===================================== */
.wpr-offcanvas-trigger {
	width:50px;
	height:50px;
}

/* =====================================
ページ内リンクボタン
===================================== */
.page-menu .elementor-button-content-wrapper{
	justify-content:space-between !important;
}

.elementor-button-icon {
	background:#407CAF;
	border-radius:50px;
	padding:5px;
}


/* =====================================
HOME テキスト装飾（下線）
===================================== */
.text-block .underline {
  position: relative;
  display: inline-block;
}

.text-block .underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
}

/* ============================= */
/* HOME HERO
/* ============================= */
.angled-wrapper {
  position: relative;
  transform: skewY(-3deg); 
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  width: 100vw;
  position: relative;
	z-index:10;
}

.marquee .elementor-heading-title {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 50s linear infinite;
  width: max-content;
  max-width: 100%;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.hero-image {
	  position: relative;
		z-index:-1;
}

.hero-wrapper .separator-line {
	  position: relative;
  transform: skewY(-3deg); 
	z-index:0;
}


/* ============================= */
/* HOME blog
/* ============================= */
body.home .wpr-grid-image-wrap {
  display: none;
}

.page-head {
	position:relative;
}


/* =====================================
ブログ
===================================== */

.blog-archive .wpr-grid-media-wrap {
  aspect-ratio: 4 / 3;
  height: auto !important;
  overflow: hidden;
  position: relative;
}

.blog-archive .wpr-grid-image-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.blog-archive .wpr-grid-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.wpr-post-content .wp-block-heading{
	margin-top:3rem;
	line-height:1.5;
}


/* =====================================
サイドカテゴリー / アーカイブ
===================================== */

.wpr-taxonomy {
  background-color: #158ca1;
  border-radius: 5px;
}

.wpr-taxonomy a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  padding: 12px 16px;
  color: white;
  font-weight: 500;
}

.elementor-widget-container h5 {
	display:none;
}

.archives-dropdown select {
  background-color: #0197b7;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  box-sizing: border-box;
	outline: none;
}


/* =====================================
沿革タイムライン
===================================== */
.timeline {
  position: relative;
  border-left: 2px solid #ffffff;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 3.5rem;
  left: -0.5rem;
  width: 15px;
  height: 15px;
  background-color: #ffffff;
  border-radius: 50%;
  z-index: 2;
}

@media (max-width: 768px) {
	.timeline::before {
		  left: -0.5rem;
	}
}


/* =====================================
コンタクトフォーム（CF7）
===================================== */

.wpcf7-form label {
  color: #ffffff;
  margin-bottom: 1.5rem;
  display: block;
}

.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea {
  background-color: rgba(30, 126, 151, 0.8);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 1rem;
  width: 100%;
  box-sizing: border-box;
	margin-top:0.5rem;
}

.wpcf7-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

.wpcf7-form ::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.wpcf7-form .wpcf7-submit {
  background-color: #f9c449;
  color: #000000;
  padding: 1rem 2rem;
  border-radius: 5px;
  border: none;
}

.required-mark {
  color: #f9c449;
  font-size: 0.9em;
  margin-left: 0.2em;
}