/* /css/component.css：共通UIコンポーネントのスタイル */
/* ----------------------------
	見出し
---------------------------- */
.h2_ttl{
	display: flex;
    align-items: center;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--spacing-md);
	color: var(--color-gray-400);
}

.h3_ttl{
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--spacing-md);
	padding-top: var(--spacing-md);
	border-top: dashed 1px var(--color-gray-200);
}

.h4_ttl{
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--spacing-md);	
}

@media screen and (max-width: 1024px) {
	
}

@media screen and (max-width: 480px) {
	.h3_ttl{
		padding-top: var(--spacing-sm);
	}
}

/* ----------------------------
	イントロ、概要、注釈、開発中
---------------------------- */
.intro{
	font-size: clamp(2.4rem, -0.267rem + 4.27vw, 4rem);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--spacing-md);
}

.caption_ttl{
	padding-bottom: var(--spacing-xs);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
}

.under_development{
	display: inline-block;
	margin-right: var(--spacing-xs);
	padding: 1px 3px;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	line-height: 1.3;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-sm);
}

.summary {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
}

/* 概要を線で囲い強調したレイアウト */
.summary_border{
	display: block;
	width: 70%;
	padding: 10px 0 10px 40px;
	margin: 0 auto var(--spacing-sm);
	border: 1px solid var(--color-gray-200);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--color-txt);
}

.summary_border_container{
	margin-bottom: var(--spacing-lg);
}

@media screen and (max-width: 1024px) {
	.intro{
		font-size: var(--font-size-xl);
	}
}

@media screen and (max-width: 480px) {
	.intro{
		font-size: var(--font-size-lg);
	}

    .summary{
		font-size: var(--font-size-base);
	}

    .summary_border{
		width: 100%;
		padding: var(--spacing-xs);
    	margin-bottom: var(--spacing-sm);
		font-size: var(--font-size-md);
	}

	.summary_border_container .arrow_02{
		width: 10px;
    	height: 10px;
	}

    .summary_border_container {
		margin-bottom: var(--spacing-md);
	}
}

/* ----------------------------
	時間、国
---------------------------- */
.date{
	display: inline-block;
    font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	margin-right: var(--spacing-xs);
}

.year{
	display: inline-block;
	margin-right: var(--spacing-xs);
	padding: 1px 5px;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	line-height: 1.3;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-sm);
}

.country{
	display: inline-block;
	margin-left: var(--spacing-xs);
	margin-right: var(--spacing-xs);
	padding: 1px 3px;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	line-height: 1.3;
	color: var(--color-white);
	background-color: var(--color-primary);
	border-radius: var(--radius-sm);
}

/* ----------------------------
	リンク
---------------------------- */
/* 外部リンク */
.link{
	display: inline-block;
    margin-top: var(--spacing-xs);
    padding-bottom: 1px;
	color: var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
}

.link::before {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2rem;
    margin-right: 8px;
    background: url(/img/common/DL_icon.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
}

/* 内部リンク */
.page_link{
	display: inline-block;
    margin-top: var(--spacing-xs);
    padding-bottom: 1px;
	color: var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
}

/* ----------------------------
	ダウンロード
---------------------------- */
.dl_btn {
	display: block;
    margin: var(--spacing-md) auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: center;
    color: var(--color-primary);
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-btn);
}

/* ----------------------------
	ボタンスタイル
---------------------------- */
/* ボタン */
.btn_underline{
	display: inline-block;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	text-align: center;
    color: var(--color-gray-300);
	border-bottom: 1px solid var(--color-gray-300);
}

.btn_underline_container{
	display: block;
	text-align: right;
}

@media screen and (max-width: 480px) {
	.btn_underline {
		font-size: var(--font-size-sm);
		padding-bottom: 2px;
	}
}

/* ----------------------------
	アイコン（画像）
---------------------------- */
/* 1行で表示される */
.icon_block{
	display: block;
	width: 30px;
	margin-right: var(--spacing-sm);
	margin-bottom: var(--spacing-sm);
}
/* 文中で表示される */
.icon_inline{
	display: inline-block;
	width: 30px;
	margin-right: var(--spacing-sm);
	vertical-align: middle;
}

/* ----------------------------
	video
---------------------------- */
.video{
	width: 100%;
	height: 100%;
}

.video_container {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
}

.video_container iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: none;
}

/* ----------------------------
	あしらい 線
---------------------------- */
.border_bottom_gray{
    border-bottom: 1px solid var(--color-gray-200);
}

/* ----------------------------
	あしらい 丸
---------------------------- */
.h2_icon{
	display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-icon);
	margin-right: var(--spacing-sm);
    background: var(--color-accent);
	vertical-align: middle;
}

.h3_icon{
	display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-icon);
    margin-right: var(--spacing-xs);
    background: var(--color-accent);
    vertical-align: middle;
}
/* リストのアイコン */
.li_icon{
	display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-icon);
	margin-right: var(--spacing-xs);
    background: var(--color-primary);
	vertical-align: middle;
}
/* featureのアイコン */
.feature_list_icon{
	display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-icon);
	margin-right: 1rem;
    background: var(--color-white);
	vertical-align: middle;
}

/* ----------------------------
	あしらい arrow
---------------------------- */
.arrow_01 {
	display: inline-block;
    background-image: url(/img/common/arrow/arrow_90.png);
    width: 10px;
  	height: 10px;
    background-repeat: no-repeat;
	background-position: center;
    background-size: contain;
}

.arrow_02 {
	display: inline-block;
    margin-left: var(--spacing-xs);
    background-image: url(/img/common/arrow/arrow_45.png);
    width: 10px;
  	height: 10px;
    background-repeat: no-repeat;
	background-position: center;
    background-size: contain;
}

/* ----------------------------
	hover効果（マウス環境のみに適用）
---------------------------- */
@media (hover: hover) and (pointer: fine) {
    .btn_underline:hover{
        color: var(--color-primary);
        border-bottom: 1px solid var(--color-primary);
        transition: all 0.5s;
    }

    .btn_underline:hover .arrow_02 {
        background-image: url(/img/common/arrow/arrow_45_prime.png);
    }

    .summary_border:hover{
        background-color: var(--color-primary);
        color: var( --color-white);
        border-radius: var(--radius-hover);
        transition: all 0.5s;
    }

    .summary_border:hover .arrow_02 {
        background-image: url(/img/common/arrow/arrow_45_fff.png);
    }
}