@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ================================================================================================================================ 
 * 共通パーツ
 * ================================================================================================================================ */
.swell-block-fullWide{
	color:#fff;
}
div#content {
    padding-top: 0 !important;
	margin-bottom:0;
}
@media(min-width:600px){
	.wp-block-columns {
		gap: 6% !important;
	}
}
/* 縦書きタイトル ------------------------------------------------------------------*/
div.title-section{
	display:flex;
	justify-content:center;
}
.title-section h2{
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.5rem;
    font-size: 32px;
    font-weight: 400;
}

/* ボタン ------------------------------------------------------------------*/
/* ボタン */
.fix-btn {
  position: fixed;
  bottom:20px;
  right: 20px; 
  z-index: 9999;  
}
/*SP以下*/
@media(min-width:640px){
 .fix-btn a.swell-block-button__link{
 width: 125px;
    height: 125px;
 padding:1px;
    border-radius: 50%;
 display: flex;
    flex-direction: column;
    gap: .2em;
    justify-content: center;
 }
	.fix-btn {
		left:20px;
		right:auto;
	}
}

/* 上に戻るボタン */
@media(max-width:599px){
	.p-fixBtnWrap {
		left: 1rem !important;
		right: auto;
	}
}

/* ================================================================================================================================ 
 * footer
 * ================================================================================================================================ */
div#before_footer_widget{
	margin-top:0 ;
	margin-bottom:0;
}
.l-footer__foot {
    background: #000;
    color: #fff;
}

/* ================================================================================================================================ 
 * TOP
 * ================================================================================================================================ */
/* FV ------------------------------------------------------------------*/
.fv-tate .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.p-mainVisual__textLayer .p-blogParts.post_content {
    display: flex;
    justify-content: flex-end;
}
.fv-tate{
	writing-mode: vertical-rl; 
	text-orientation: upright;     
	letter-spacing: 0.5rem;
}
p.fv-tate-title{
		font-size:40px;
}
p.fv-tate-txt {
    align-self: flex-end;
}
p.fv-tate-title span{
		font-size:28px;
}
p.fv-tate-txt{
		font-size:18px;
}

@media(max-width:959px){
	.l-header__menuBtn.sp_{
		visibility:hidden;
	}
	.fv-tate .wp-block-group__inner-container {
		height:auto;
	}
	.fv-tate .wp-block-group__inner-container {
		margin-right:24px;
	}
}

/*  コンセプト：縦書きのベース ------------------------------------------------------------------ */
/* #concept::before{
	content:"";
	background-image:url(/wp-content/uploads/2025/10/logo_mark.png);
	background-repeat:no-repeat;
	 background-size: contain;
	width:400px;
	height:400px;
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	opacity:0.1;
} */
@media(min-width:640px){
#concept .swell-block-fullWide__inner.l-container{
	align-items: center;
	justify-content:center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    max-width: 100%;
}
.tategaki{
	writing-mode: vertical-rl; 
	text-orientation: upright;     
	letter-spacing: 0.5rem;
	height:470px;
	text-align: justify;
}
.tategaki h2{
	font-size:32px;
	margin-left:3rem;
	font-weight:100;
}
.tategaki p{
	margin-left:1rem;
	margin-bottom:0;
	margin-top:3rem;
}
}

/* Message ------------------------------------------------------------------*/
h2.message-title{
	writing-mode: vertical-rl; 
	text-orientation: upright;     
	letter-spacing: 0.5rem;
	font-size:40px;
	font-weight:400;
}
.message-columns2-txt{
	line-height:2;
}
@media(min-width:600px){
	.message-titleColumn {
		gap: 4rem !important;
		display: flex;
		justify-content: center;
		padding-top: 250px !important;
	}
	
	#message .message-columns2-txt{
		margin-top: -120px !important;
	}
}

/* Course ------------------------------------------------------------------*/
#course button.c-tabList__button {
    background: var(--color_main) !important;
	color: #fff;
}
#course .c-tabBody {
    border: 4px solid var(--color_main) !important;
}


/* =========================================================
   無限ループアニメーション（整形＆簡素化版）
   * マウスホバーで一時停止
   * .-reverse で反転
   * 600px以上はCSSアニメ、未満は横スクロール＋スナップ
   ========================================================= */

/* ループ用キーフレーム */
@keyframes infinite-loop {
  to { transform: translateX(-100%); }
}

/* ベース */
.infiniteLoop {
	--item-mobile-width: 80vw;   /* スマホ時のアイテム幅 */
	--duration: 50s;             /* アニメーション速度 */
	--gap: 0rem;                 /* アイテム間隔 */
	--item-width:300px;
  /* 動作系（内部用） */
  --play-state: running;
  --direction: normal;
  --flex-direction: row;
}

/* 反転・一時停止 */
.infiniteLoop.-reverse { --direction: reverse; --flex-direction: row-reverse; }
/* .infiniteLoop:hover     { --play-state: paused; } */

/* ラッパーとトラックの基本形（既存のネスト構造を維持） */
.infiniteLoop > * {
  display: flex;
}

.infiniteLoop > * > * > * {
  /* アニメーションさせるトラック */
  display: flex;
  flex-wrap: nowrap !important;
  flex-direction: var(--flex-direction, row);
  gap: var(--gap);
  margin: 0 !important;
  padding-left: var(--gap) !important;
  overflow: hidden;
  transform: translateX(0);
}

.infiniteLoop > * > * > * > * {
  /* リスト（余白のリセット） */
  padding: 0 !important;
}

.infiniteLoop > * > * > * > * > * {
  /* 実アイテム */
  width:var(--item-width);
  margin-inline: auto;
}

/* --- CSSアニメでループ --- */

.infiniteLoop > * > * > * {
    animation: infinite-loop var(--duration) linear infinite both;
    animation-direction: var(--direction);
    animation-play-state: var(--play-state);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
 }
@media (max-width: 599px) {
  .infiniteLoop {
    --item-width: 180px;
  }
}

/* パララックス ------------------------------------------------------------------*/
/* 既存の指定に追加（重複OK） */
.swell-block-fullWide {
  background-size: cover;
  background-position: center center; /* JSでYのみ上書きします */
  background-repeat: no-repeat;
}

/* PCは従来どおり固定背景でOK（あなたのCSSのままでOK） */
@media (min-width: 960px) {
  .swell-block-fullWide.-fixbg {
    background-attachment: fixed;
  }
}