@charset "utf-8";
/* CSS Document */

/* ======================================================================= 
	コンテンツ共通
 ========================================================================*/
/* parts  -------------------- { */
:root {
	/* color */
	--color-base-dg: #041b15;
	--color-base-pg: #136f63;
	--color-base-pg90: #297D72;
	--color-base-lsg: #22aaa1;
	--color-base-lsg-tp50: rgba(34,170,161,0.50);
	--color-base-t: #4ce0d2;
	--color-base-sb: #84cae7;
	--color-base-sb-75: #A3D7ED;
	--color-base-sb-05: #F9FCFE;
	--color-base-sb-10: rgba(132,202,231,0.10);
	--color-base-sb-20: rgba(132,202,231,0.20);
	--color-pearlwhite: #f7f6f5;
	/* font */
	--NotoSansJp: 'Noto Sans JP';
	--udmarugo-lg: 'fot-udmarugo-large-pr6n', sans-serif;
	--Roboto-light: 'RobotoLight';
	--Roboto-bold: 'RobotoBold';
}

/* section color */
.diff-bgcolor-article { background: var(--color-base-sb-05); }
.diff-bgcolor-article_odd { background: var(--color-base-sb-10); }
.diff-bgcolor-article_even { background: var(--color-base-sb-20); }

/* re-setteng */
h1,h2,h3,h4,h5 { font-family: fot-udmarugo-large-pr6n, sans-serif; font-weight: 700; font-style: normal; }
.section-inner > .hdg-b:first-child { margin-top: 0; }
.hdg-b::before { background: var(--color-base-pg); }
.list-link-a>li>a::before { border-top: 2px solid var(--color-base-pg); border-right: 2px solid var(--color-base-pg); }
.list-a>li:before { background: var(--color-base-pg); }
.btn-b {
    background: var(--color-base-pg);
    border: 1px solid var(--color-base-pg);
}
.btn-b:hover, .btn-b:active, .btn-b:focus {
    background: var(--color-base-pg90);
    border: 1px solid var(--color-base-pg90);
}

.LinkBtn > a { text-decoration: none; }
.LinkBtn > a:hover { color: inherit; }

/* Link Button */
.LinkBtn > a { position: relative; background: var(--color-base-t); border-radius: 3px; padding: 4px 24px 4px 14px; transition: 0.3s ease-in-out; }
.LinkBtn > a:after { content: ''; width: 5px; height: 5px; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg) translateY(-50%); position: absolute; top: 46%; right: 10px; border-radius: 1px; transition: 0.3s ease-in-out; }
.LinkBtn > a:hover { background: var(--color-base-lsg); }
.LinkBtn.diff-ib { display: inline-block; }
/* -------------------- } parts */

/* ======================================================================= 
	FMVサポートアプリを活用しよう /support/advice/
 ========================================================================*/
/* fccl-hero-area-advice -------------------- { */
.fccl-hero-area-advice { position: relative; background: var(--color-base-sb-75); height: 40vh; }
.fccl-hero-area-advice::after { content: ''; position: absolute; right: 0; left: -50%; top: 100%; z-index: 1; display: block; height: 50px; background-size: 50px 100%; background-image: linear-gradient(135deg, var(--color-base-sb-75) 25%, transparent 25%), linear-gradient(225deg, var(--color-base-sb-75) 25%, transparent 25%); background-position: 0 0; }
.fccl-hero-area-advice > .content { height: 100%; display: flex; justify-content: center; align-items: center; }
.fccl-hero-area-advice > .content > .content-inner { position: relative; max-width: 1280px; margin: 0 auto; }
.fccl-hero-area-advice > .content > .content-inner .title-txt { font-family: var(--udmarugo-lg); font-style: normal; line-height: 1.6; text-align: center; color: var(--color-base-dg);}
.fccl-hero-area-advice > .content > .content-inner .title-txt .main-tit { font-size: clamp(32px, 5.4vw, 64px); font-weight: 700; letter-spacing: -.1rem; text-shadow: 0 0 3px #fff; }
.fccl-hero-area-advice > .content > .content-inner .title-txt .sub-tit { font-size: clamp(18px, 2.4vw, 28px); font-weight: 600; margin-top: 16px; }
@media screen and (max-width: 480px) {
	.fccl-hero-area-advice > .content > .content-inner .title-txt { margin-left: 5px; margin-right: 5px; }
}
/* -------------------- } fccl-hero-area-advice */
/* feature-advice -------------------- { */
#feature-advice { margin-bottom: 0; background: url(/support/advice/images/feature-advice.webp) no-repeat 80% 15% #fff; background-size: 1920px; background-color: rgba(255,255,255,0.35); background-blend-mode: lighten; }
#feature-advice .container { max-width: 100%; width: 1280px; margin: 0 auto; }
#feature-advice .container-inner { display: flex; justify-content: left; align-items: center;  min-height: 280px; color: var(--color-base-dg); }
#feature-advice .container-inner > div { display: flex; flex-direction: column; justify-content: center; margin: 6% 4% 1% 4%; }
	#feature-advice h2 { width: 100%; margin: 0 0 24px; margin-right: 0px; margin-left: 0px; font-size: clamp(20px, 5.4vw, 32px); font-weight: 700; text-align: left; text-shadow: 0 0 3px #fff; }
#feature-advice .container-inner > div p { font-family: var(--udmarugo-lg); font-weight: 600; font-style: normal; font-size: clamp(16px, 3.4vw, 22px);}
/* -------------------- } feature-advice */
/* articlelist  -------------------- { */
.articlelist { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 32px; align-items: stretch; }
.articlelist > .bnList { display: flex; flex-direction: column; border-radius: 8px; background: #fff; box-shadow: 0 0 6px rgba(132,202,231,0.2); }
.articlelist > .bnList > a { display: flex; align-items: stretch; flex-direction: column; justify-content: space-between; flex-grow: 1; text-decoration: none; }
.articlelist > .bnList > a .item-head { display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--color-base-lsg-tp50); border-radius: 8px 8px 0 0; }
.articlelist > .bnList > a .item-head .item-head-icon { max-width: 220px; padding: 20px;}
.articlelist > .bnList > a .item-head .item-head-icon > img { width: 100px; height: auto; }
.articlelist > .bnList > a .item-head .item-head-title { flex: 1; text-align: center; margin: 0 auto 20px; }
.articlelist > .bnList > a .item-head .item-head-title .catchcopy { font-size: 1.8rem; font-family: var(--udmarugo-lg); font-weight: 400; font-style: normal;margin-bottom: 8px; }
.articlelist > .bnList > a .item-head .item-head-title h2 { font-size: 2.8rem; text-shadow: 0 0 3px #fff;}
.articlelist > .bnList > a .item-cont { flex-grow: 1; margin: 20px; }
.articlelist > .bnList > a .item-foot { margin: 20px; text-align: center; }
.articlelist > .bnList > a:hover { color: inherit; }
	/* 詳しく見るボタン resetting */
	.btn-round_arrow { color: var(--color-base-pg); font-size: 1.6rem; font-weight: 700; }
	.btn-round_arrow:after { background: var(--color-base-pg); }
@media screen and (max-width: 480px) {
	.articlelist { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}
/* -------------------- } articlelist */

/* ======================================================================= 
	アプリページ共通 /support/advice/配下
 ========================================================================*/
/* fccl-hero-area-advice-app -------------------- { */
.fccl-hero-area-advice-app { overflow: hidden; height: 40vh; padding-bottom: 10px; }
.fccl-hero-area-advice-app > .content { position: relative; background: var(--color-pearlwhite); border-bottom-left-radius: 60%; border-bottom-right-radius: 60%; border-bottom: 10px solid var(--color-base-sb); outline: 10px solid var(--color-base-lsg); outline-offset: 0; margin-left: -100px; margin-right: -100px; padding-left: 100px; padding-right: 100px; } /* 背景指定*/
.fccl-hero-area-advice-app > .content { height: 100%; display: flex; justify-content: center; align-items: center; }
.fccl-hero-area-advice-app > .content > .content-inner { position: relative; max-width: 1280px; margin: 0 auto; }
.fccl-hero-area-advice-app > .content > .content-inner .title-txt { font-family: fot-udmarugo-large-pr6n, sans-serif; font-style: normal; line-height: 1.6; text-align: center; color: var(--color-base-dg);}
.fccl-hero-area-advice-app > .content > .content-inner .title-txt .main-tit { font-size: clamp(40px, 5.4vw, 64px); font-weight: 700; letter-spacing: -.1rem; text-shadow: 0 0 3px #fff; }
.fccl-hero-area-advice-app > .content > .content-inner .title-txt .sub-tit { font-size: clamp(18px, 2.4vw, 28px); font-weight: 600; margin-top: 16px; }
@media screen and (max-width: 480px) {
	.fccl-hero-area-advice-app > .content > .content-inner .title-txt { margin-left: 5px; margin-right: 5px; }
}
/* -------------------- } fccl-hero-area-advice-app */

/* feature-advice-app -------------------- { */
.feature-advice-app { position: relative; display: flex; justify-content: space-around; align-items: center; flex-direction: row-reverse; }
.feature-advice-app > .item { }
.feature-advice-app > .item.readtext { flex: 1; }
.feature-advice-app > .item.img-left { width: 480px; }
.feature-advice-app figure > img { max-width: 420px; }
@media screen and (max-width: 768px) {
	.feature-advice-app > .item.readtext { z-index: 1; margin-right: 32px; }
	.feature-advice-app > .item.img-left { width: 32px; }
	.feature-advice-app figure > img { opacity: .5; margin-left: 32px; }
}
@media screen and (max-width: 480px) {
	.feature-advice-app > .item.img-left { width: 16px; }
	.feature-advice-app figure > img { max-width: 420px; }
}
.readtext > p+* { margin-top: 16px!important; /*font-family: var(--udmarugo-lg);*/ font-weight: 400; /*font-style: normal;*/ font-siz: 1.8rem; text-shadow: 0 0 3px #fff; }
.readtext > p:first-child { font-family: var(--udmarugo-lg); font-weight: 700; font-style: normal; font-size: clamp(20px, 5.4vw, 30px); margin-bottom: 34px; text-shadow: 0 0 3px #fff;}
/* -------------------- } feature-fmvadviser */
/* AppealingPointsBlock -------------------- { */
.AppealingPointsBlock { max-width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap:16px; }
.AppealingPointsBlock .AppealingPoints-Txt .hd-txt { display: flex; align-items: flex-start; column-gap: 16px;}
.AppealingPointsBlock .AppealingPoints-Txt .hd-txt .point > img { min-width: 100px; }
.AppealingPointsBlock .AppealingPoints-Txt .hd-txt h2 { font-size: clamp(2.6rem, 2.4vw, 3.2rem); line-height: 1.2; }
.AppealingPointsBlock .AppealingPoints-Txt .hd-txt div:last-child { flex: 1; margin-top: 16px; }
.AppealingPointsBlock .AppealingPoints-Txt .leader { margin-top: 24px; }
.AppealingPointsBlock .AppealingPoints-Img { max-width: 300px; }
.AppealingPointsBlock.col3 { align-items: stretch; gap: 24px; }
.AppealingPointsBlock.col3 .col3-item { flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 24px; }
.AppealingPointsBlock.col3 .AppealingPoints-Txt .hd-txt .point > img { min-width: 80px; }
.AppealingPointsBlock.col3 .AppealingPoints-Txt .hd-txt div:last-child { margin-top: 10px; }

@media screen and (max-width: 768px) {
	.AppealingPointsBlock  { flex-direction: column; margin: 0 2vw; }
	.AppealingPointsBlock .AppealingPoints-Txt { order: 1; }
	.AppealingPointsBlock .AppealingPoints-Img { order: 2; max-width: 680px; text-align: center; }
	/*.AppealingPointsBlock.col3 .col3-item { align-items: center; }*/
	.AppealingPointsBlock.col3 .col3-item:not(:first-child) { margin-top: 32px; }
	.AppealingPointsBlock.col3 .AppealingPoints-Txt .hd-txt .point > img { min-width: 100px; }
	.AppealingPointsBlock.col3 .AppealingPoints-Txt .hd-txt div:last-child { margin-top: 16px; }
}
@media screen and (max-width: 480px) {
	.AppealingPointsBlock .AppealingPoints-Txt .hd-txt { flex-direction: column; }
	.AppealingPointsBlock .AppealingPoints-Txt .hd-txt .point { margin: 0 auto; }
}
/*.AppealingPointsBlock.col3 [class^="AppealingPoints-"] { width: calc(100% / 3);}
*/
/* -------------------- } AppealingPointsBlock */
/* HowToUseBlock -------------------- { */
.HowToUseBlock { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 16px; grid-row-gap: 16px; }
.HowToUseBlock.col2 { align-items: stretch; gap: 24px; }
.HowToUseBlock.col2 .col2-item { flex: 1; display: flex; flex-direction: column; /*justify-content: space-between;*/ align-items: stretch; gap: 24px; border: 1px solid #cccc; padding: 16px; background: #ffffff; }
.HowToUseBlock.col2 .col2-item > .img { text-align: center; }
.HowToUseBlock.col2 .col2-item.box1 { grid-area: 1 / 1 / 2 / 2; }
.HowToUseBlock.col2 .col2-item.box2 { grid-area: 1 / 2 / 2 / 3; }
.HowToUseBlock.col2 .col2-item.box3 { grid-area: 2 / 1 / 3 / 3; }
@media screen and (max-width: 768px) {
.HowToUseBlock { grid-template-columns: 1fr; }
.HowToUseBlock.col2 .col2-item.box1 { grid-area: 1 / 1 / 2 / 2; }
.HowToUseBlock.col2 .col2-item.box2 { grid-area: 2 / 1 / 3 / 2; }
.HowToUseBlock.col2 .col2-item.box3 { grid-area: 3 / 1 / 4 / 2; }
}

/* -------------------- } HowToUseBlock */

/* ======================================================================= 
	FMVアドバイザー /support/advice/fmvadviser/
 ========================================================================*/