@charset "UTF-8";

/*
 *
 *	ランディングページ用 css
 
 *	01. base
    ├ 01-01. reset
    ├ 01-02. html・body設定
    ├ 01-03. リンク色設定
    └ 01-04. etc

 *	01. header / footer
 *	02. box
 *	03. main image
 *	04. logo slider
 *	05. flex
 *	06. thanks
 *	07. list 
 *
 */

/*----------------------------------------

	01. base

----------------------------------------*/
/* ----------------------------------
    01-01. reset
-----------------------------------*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
	display: block;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote::after,q:before, q::after {
	content: '';
	content: none;
}
input, textarea {
	margin: 0;
	padding: 0;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img	{ border: none; image-rendering: -webkit-optimize-contrast; max-width: 100%; }

/* ----------------------------------
    01-02. html・body設定
-----------------------------------*/
*,*::before,*::after {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
html, body {
	  height: 100%;
}
body {
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	min-width: 320px;
	width: 100%;
	background-color: var(--white);
	color: var(--def-txt-00);
	font-size: var(--f-s-m);
    font-family: "tbudgothic-std", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-weight: 400;
    line-height: 1.6;
}
.ios body {
	overflow-x: hidden;
}

/* ----------------------------------
    01-03. リンク色設定
-----------------------------------*/
a			{ text-decoration: none; }
a:link		{ color: var(--blue-02); }
a:visited	{ color: var(--blue-02); }
a:hover		{ color: var(--blue-01); }
a:active	{ color: var(--blue-01); }
a.u_line 	    { text-decoration: underline; }
a.u_line:hover 	{ text-decoration: none; }

/* ----------------------------------
    01-03. etc
-----------------------------------*/

/*---- 背景色 ----*/
section.odd,
.white_bk    { background-color: var(--white); }
section.even,
.gray_bk     { background-color: var(--gray1-01) !important; }
.orange1_bk  { background-color: var(--orange1-02) !important; }
.orange2_bk  { background-color: var(--orange2-01) !important; }
.red_bk      { background-color: var(--red-01) !important; }
.green1_bk   { background-color: var(--green1-01) !important; }
.green2_bk   { background-color: var(--green1-02) !important; }
.green3_bk   { background-color: var(--green2-02) !important; }
.blue_bk     { background-color: var(--blue-02) !important; }
.purple_bk   { background-color: var(--purple-02) !important; }

/*---- 表示 / 非表示 ----*/
.show	{ display: block !important; }
.hide	{ display: none !important; }

/*---- box ----*/
.box_80		{ width: 80% !important; }
.box_30		{ width: 30% !important; }
.box_20		{ width: 20% !important; }
.box_10		{ width: 10% !important; }

/*---- text-align ----*/
.tx_left	{ text-align: left !important; }
.tx_right	{ text-align: right !important; }
.tx_center	{ text-align: center !important; }
.tx_bold	{ font-weight: bold !important; }

/*---- font color ----*/
.tx_red_01      { color: var(--red-01) !important;; }
.tx_red_02		{ color: var(--red-02) !important; }
.tx_green_01    { color: var(--green1-01) !important; }
.tx_green_02    { color: var(--green1-02) !important; }
.tx_green_03    { color: var(--green2-02) !important; }
.tx_blue	    { color: var(--blue-02) !important; }
.tx_purple      { color: var(--purple-02) !important; }
.tx_orange_01	{ color: var(--orange1-02) !important; }
.tx_orange_02   { color: var(--orange2-01) !important; }
.tx_gray_01	    { color: var(--gray2-03) !important; }
.tx_white       { color: var(--white) !important; }

/*---- font size ----*/
.fs_10	{ font-size: var(--f-s-10) !important }   /* 10px */
.fs_12	{ font-size: var(--f-s-12) !important; }  /* 12px */
.fs_14	{ font-size: var(--f-s-14) !important; }  /* 14px */

.fs_s	{ font-size: var(--f-s-s) !important; }   /* 11.312px 白銀比 */
.fs_m	{ font-size: var(--f-s-m) !important; }   /* 16px 白銀比 デフォルト */
.fs_l	{ font-size: var(--f-s-l) !important; }   /* 23px 白銀比 h4 */
.fs_ll	{ font-size: var(--f-s-ll) !important; }  /* 32px 白銀比 h2-3 */
.fs_xl	{ font-size: var(--f-s-xl) !important; }  /* 45px 白銀比 h1 */
.fs_xxl	{ font-size: var(--f-s-xxl) !important; } /* 64px 白銀比 */

/* 改行 */
.br-pc  	{ display: inline !important; }
.br-pc-tab	{ display: inline !important; }
.br-pc-sp	{ display: inline !important; }
.br-tab 	{ display: none !important; }
.br-tab-sp	{ display: none !important; }
.br-sp  	{ display: none !important; }

/* ---- tablet ----*/
@media only screen and (max-width: 1024px) {
    .br-pc  	{ display: none !important; }
	.br-pc-tab	{ display: inline !important; }
	.br-pc-sp	{ display: none !important; }
    .br-tab 	{ display: inline !important; }
	.br-tab-sp	{ display: inline !important; }
    .br-sp  	{ display: none !important; }
}

/* ---- SP ----*/
@media only screen and (max-width: 699px) {
    .br-pc		{ display: none !important; }
	.br-pc-tab	{ display: none !important; }
	.br-pc-sp	{ display: inline !important; }
    .br-tab		{ display: none !important; }
	.br-tab-sp	{ display: inline !important; }
    .br-sp		{ display: inline !important; }
}

/*---- select ----*/
select {
	padding: 8px 16px;

}
.ios select {
	padding: 16px;
	min-width: 72px;
	height: 32px;
	border-radius: var(--bdr-r-4);
}

/*---- input ----*/
button, input, select, textarea {
    font-family: inherit;
}

 /*----------------------------------------

	01. header / footer

----------------------------------------*/

nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 64px;
    background-color: var(--gray1-01);
	z-index: 10;
}
#nav_box {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 auto;
    max-width: var(--max-w-1500);
    height: 100%;
}

/* logo --------*/
#logo_box {
    /*flex: 0 0 158px;*/
    flex: 0 0 240px;
    padding: 0 24px;
}
#logo_box a:hover {
    opacity: var(--def-hvr-opacity);
}
#logo_box img,
#sp_logo_box img {
    width: 100%;
}

#sp_header,
#menu_btn {
	display: none;
}

/* メインメニュー --------*/
#main_nav {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
}
#main_nav > li > a {
	display: flex;
    align-items: center;
    justify-content: center;
	flex-wrap: wrap;
	font-size: var(--fs-s);
    transition: var(--def-transition);
}
#main_nav > li:not(:last-child):not(:nth-last-child(2)) > a {
	padding: 0 16px;
    height: 100%;
    color: var(--def-txt-00);
    border-bottom: 2px solid transparent;
}
#main_nav > li:not(:last-child):not(:nth-last-child(2)) > a:hover,
#main_nav > li:not(:last-child):not(:nth-last-child(2)) > a.active {
    border-bottom: 2px solid var(--blue-02);
}

#main_nav > li:nth-last-child(2) {
    padding-left: 32px;
}
#main_nav > li:last-child > a,
#main_nav > li:nth-last-child(2) > a {
    margin: 0 4px;
    padding: 8px 0;
    width: 152px;
    height: 64px;
    border-radius: var(--bdr-r-8);
	color: var(--white);
	font-size: var(--fs-s);
}
#main_nav > li p {
    font-size: var(--f-s-10);
    text-align: center;
}

#main_nav > li a img,
#main_nav > li a svg {
    max-width: 16px;
    max-height: 16px;
}
#main_nav > li span {
	flex: 0 0 100%;
	text-align: center;
}
#main_nav > li span:last-child {
	font-size: var(--fs-xxs);
}
.pc_img { display: inline; }
.sp_img { display: none; }

#menu_overray {
    position: fixed;
    top: 0;
    width: 0;
    height: 100%;
    background-color: rgba(0,0,0,0);
}
.slide_on #menu_overray {
    width: 100%;
    background-color: rgba(0,0,0,.4);
    z-index: 99;
}

/* ---- Tablet / SP ----*/
/*@media only screen and (max-width: 1200px) {*/ /* CTAボタンを3つ配置したので1200pxでメニューがロゴに被ってしまう対応 2023-11-29 saito */
@media only screen and (max-width: 1024px) {

    #menu_box {
        position: fixed;
        left: auto;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 100;
        width: 0;
        height: 100%;
        opacity: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
		background-color: transparent;
    }
    #menu_box.active {
        width: 256px;
        opacity: 1 !important;
		background-color: var(--darkBlue-03);
        transition: var(--def-transition);
    }
    #menu_box.close {
        width: 0;
        opacity: 0;
		background-color: transparent;
        transition: var(--def-transition);
    }

	#logo_box/*,
    #main_nav*/ {
		display: none !important;
	}
    .slide_on #main_nav {
		display: block;
	}
	#nav_box {
        display: block;
		width: 256px;
		height: 100%;
	}
	#main_nav > li > a {
		width: 100%;
        height: 56px !important;
        color: var(--white) !important;
		border-bottom: 1px solid var(--darkBlue-01) !important;
    }
	#main_nav > li > a:hover {
        border-bottom: 1px solid var(--darkBlue-01) !important;
        opacity: var(--def-hvr-opacity);
    }
	#main_nav > li:last-child > a,
	#main_nav > li:nth-last-child(2) > a {
		padding-top: 8px;
		margin: 0;
		width: 100%;
		border-radius: 0;
	}
	#main_nav > li:last-child > a {
        color: var(--def-txt-00) !important;
    }
	.pc_img { display: none; }
	.sp_img { display: inline; }

    #main_nav > li:nth-last-child(2) {
        padding-left: 0;
    }
    #main_nav > li p {
        color: var(--white);
    }
    #main_nav > li #dl_btn p {
        color: var(--def-txt-00);
    }

    /* スマホ用ヘッダ ---- */
	#sp_header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
		width: 100%;
		height: 64px;
		background-color: var(--gray1-01);
        border-bottom: 1px solid var(--gray1-04);
	}
	#sp_logo_box {
        width: 160px;
        height: 26px;
	}
	#menu_btn {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
	}
}

/* hamburger-menu --------*/
#menu_btn {
    z-index: 100;
}
#menu_btn input {
  display: none;
}

.menu_button {
    display: block;
	width: 64px;
	height: 64px;
	cursor: pointer;
}

.hamburger_line,
.hamburger_line::before,
.hamburger_line::after {
    position: absolute;
    top: calc(50% - 1px);
    left: 20px;
	width: 24px;
	height: 2px;
    border-radius: 1px;
	background-color: var(--gray2-04);
    transition: var(--def-transition);
}
.hamburger_line::before,
.hamburger_line::after {
	content: "";
	display: block;
    left: 0;
}
.hamburger_line::before {
    top: -8px;
}
.hamburger_line::after {
	top: 8px;
}

/* active */
#hamburger_menu_button {
    transition: var(--def-transition);
}
#hamburger_menu.active + #hamburger_menu_button {
    transform: translateX(-256px);
    background-color: var(--darkBlue-03);
}
#hamburger_menu.active + #hamburger_menu_button .hamburger_line {
	background: none;
}
#hamburger_menu.active + #hamburger_menu_button .hamburger_line::before {
	top: 0;
    transform: rotate(45deg) scale(1);
    background-color: var(--white);
}
#hamburger_menu.active + #hamburger_menu_button .hamburger_line::after {
	top: 0;
    transform: rotate(-45deg) scale(1);
    background-color: var(--white);
}

/* ----------------------------------
    footer
-----------------------------------*/

footer {
    width: 100%;
    background-color: var(--gray1-01);
    transition: var(--def-transition);
}
#thanks footer {
    padding-bottom: 0;
}
/* フッタ上段 --------*/
footer > div:first-child {
    position: relative;
	height: 184px;
    background-color: var(--blue-02);
}
#footer_img {
    position: absolute;
    bottom: -8%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 840px;
    z-index: 1;
}

/* フッタ中段 --------*/
footer > div:nth-child(2) {
    display: flex;
    margin: 56px auto 40px;
    padding: 0 24px;
    max-width: var(--max-w-1196);
}
footer > div:nth-child(2) > div:first-child {
    flex: 0 0 40%;
    padding-right: 40px;
    font-size: var(--f-s-12);
}
footer > div:nth-child(2) > div:first-child img {
    margin-bottom: 16px;
    max-width: 160px;
}
#footer_contact_box {
    display: inline-block;
    margin-top: 40px;
    color: var(--gray2-04);
    border-radius: 8px;
    background-color: var(--gray1-02);
}
#footer_contact_box > div {
    margin: 0 16px;
    padding: 16px;
    border-bottom:  1px solid var(--gray1-03);
}
#footer_contact_box > div:last-child {
    border-bottom:  none;
}
#footer_contact_box img {
    margin: 0 8px 8px 0;
    width: 16px;
    vertical-align: middle;
}
#footer_contact_box span {
    font-size: var(--f-s-m);
    font-weight: bold;
}
#footer_contact_box > div a {
    display: block;
    color: var(--gray2-04);
}
#footer_contact_box > div a::before {
    display: none;
}

footer > div:nth-child(2) > div:nth-child(2) {
    flex: 0 0 30%;
}
footer > div:nth-child(2) > div:last-child {
    flex: 0 0 30%;
}
footer > div:nth-child(2) a {
    display: inline-block;
    color: var(--def-txt-00);
}
footer > div:nth-child(2) a:hover,
footer > div:nth-child(3) a:hover {
    text-decoration: underline;
}

.lv_01 > li {
    margin-bottom: 16px;
}
.lv_01 > li > a {
    font-weight: bold;
}
.lv_01 > li > a::before {
    content: "● ";
    color: var(--blue-02);
}

.lv_02 > li > a {
    position: relative;
    margin: 8px 0 0 30px;
    font-size: var(--f-s-14);
    vertical-align: middle;
}
.lv_02 > li > a::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -12px;
    width: 8px;
    height: 8px;
    background: url("../img/icon_svg/icon-arrow-r-b.svg") no-repeat center center / contain;
}
.lv_02 > li > a.open::before {
    transform: rotate(90deg);
}
.lv_03 {
    margin: 4px 0 0 24px;
    padding-left: 8px;
}
.lv_03 > li > a {
    font-size: var(--f-s-14);
    color: var(--gray2-04) !important;
}
.lv_03 > li > a::before {
    content: "・";
    color: var(--blue-02);
}

/* フッタ下段 --------*/
footer > div:nth-child(3) {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 16px 24px;
    max-width: var(--max-w-1196);
    font-size: var(--f-s-12);
    border-top:  1px solid var(--gray2-01);
}
footer > div:nth-child(3) a {
    color: var(--def-txt-00);
}
footer > div:nth-child(3) > div:nth-child(2) {
    flex: 1;
    padding-right: 24px;
    text-align: right;
}
footer > div:nth-child(3) > div:last-child {
    flex: 0 0 48px;
}

#top_btn {
	width: 48px;
	height: 48px;
	text-align: center;
	cursor: pointer;
    border-radius: 50%;
}
#top_btn_icon {
	width: 48px;
	height: 48px;
    fill: var(--blue-02);
}
#top_btn_icon:hover {
    border-radius: 50%;
    box-shadow: var(--def-hvr-shadow);
}
#top_btn:hover #top_btn_icon {
    fill: var(--blue-03);
}

#btm_btn_box {
    display: none;
}

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

    header {
        border-bottom: 1px solid var(--gray1-04);
    }
    #logo_box {
        display: block; /* 後で消す */
    }
    #logo_box a {
        margin: 0 auto;
        height: 63px;
    }

    #footer_img {
        bottom: -4%;
    }

    footer > div:nth-child(3) > div:last-child {
        padding-right: 72px;
    }
}

@media only screen and (max-width: 699px) {

    footer > div:first-child {
        height: 96px;
    }

    footer > div:nth-child(2),
    footer > div:nth-child(3) {
        flex-wrap: wrap;
    }
    footer > div:nth-child(2) > div,
    footer > div:nth-child(3) > div {
        flex: 0 0 100% !important;
    }

    footer > div:nth-child(2) > div:first-child {
        padding-right: 0;
    }
    #footer_contact_box {
        display: block;
        margin: 16px 0 40px;
        width: 100%;
    }
    footer > div:nth-child(3) > div:nth-child(2) {
        margin-top: 24px;
        padding: 0;
        text-align: center;
    }
    footer > div:nth-child(3) > div:last-child {
        margin: 16px 0;
        padding: 0;
        text-align: right !important;
    }
}


/*----------------------------------------

	02. box

----------------------------------------*/

#wrapper {
	position: relative;
    padding-top: 64px;
    transition: all .3s ease-in-out, padding 0s;
}

section {
    position: relative;
    margin: 0 auto;
    padding-bottom: 80px;
    max-width: var(--max-w-1500);
    background-color: var(--white);
}
.mobile section:not(:last-child) {
    padding-bottom: 16px; /* 0pxだとAndroidスマホで崩れる */
}
section div.sec_head img {
    margin-bottom: -1px;
    vertical-align: bottom;
}

/* box 背景色 */
section.odd, .white_bk { background-color: var(--white); }
section.even, .gray_bk { background-color: var(--gray1-01) !important; }

h1, h2, h3, h4, h5 {
    font-weight: bold;
}

/* 見出し */
section > h3 {
    margin: 40px auto 0;
    max-width: var(--max-w-728);
    font-size: var(--fs-xl);
    text-align: center;
}
section > h3 span {
    display: inline-block;
    padding-bottom: 12px;
    font-weight: bold;
    border-bottom: 2px solid;
}
section > h3 + h4,
h4.title {
    margin: 40px auto 0;
    max-width: var(--max-w-728);
    font-size: var(--fs-ll);
    text-align: center;
}
section > h3 + p {
    margin: 32px auto 0;
    max-width: var(--max-w-728);
    font-size: var(--fs-m);
    text-align: center;
}

/* バナー */
.banner_l_box {
    position: relative;
    padding: 32px;
    text-align: center;
    background-color: #fff;
    z-index: 100;
}
.banner_l_box img {
    max-width: 100%;
}

/* text */
.txt_box {
    margin: 0 auto 24px;
    max-width: var(--max-w-728);
}

/* ボタン */
.btn_box {
    margin-top: 40px;
    padding: 0 16px;
    text-align: center;
}
[class^="btn_"]:not(.btn_box) {
	position: relative;
	display: inline-block;
	padding: 16px;
	min-height: 56px;
	line-height: 1.6;
	text-align: center;
	color: var(--white) !important;
	background-color: var(--def-btn-bg);
	border-radius: var(--bdr-r-8);
	border: none;
	cursor: pointer;
    vertical-align: middle;
    box-shadow: var(--def-shadow);
    transition: var(--def-transition);
}
[class^="btn_"]:not(.btn_box):hover {
    background-color: var(--def-btn-bg-hvr);
    transform: translateY(-2px);
}
[class^="btn_"]:not(.btn_box) img,
[class^="btn_"]:not(.btn_box) svg {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 16px;
    transform: translateY(-50%);
}
[class^="btn_"]:not(.btn_box) svg {
    fill: var(--white);
}

.blue_btn         { background-color: var(--blue-02) !important; color: var(--white) !important; }
.blue_btn:hover   { background-color: var(--blue-03) !important; }

.green_btn        { background-color: var(--green2-02) !important; color: var(--white) !important; }
.green_btn:hover  { background-color: var(--green2-03) !important; }

.orange_btn       { background-color: var(--orange-btn-bg) !important; color: var(--white) !important; border: 2px solid var(--orange2-02); }
.orange_btn:hover { background-color: var(--orange-btn-bg-hvr) !important; }

.gray_btn         { background-color: var(--gray2-03) !important; color: var(--white) !important; }
.gray_btn:hover   { background-color: var(--gray2-04) !important; }

.def_btn {
    color: var(--gray2-04) !important;
    background-color: var(--white) !important;
    border: 2px solid var(--gray2-04);
}
.def_btn:hover {
    color: var(--white) !important;
    background-color: var(--gray2-04) !important;
}
.def_btn svg {
    fill: var(--gray2-04);
    transition: var(--def-transition);
}
.def_btn:hover svg {
    fill: var(--white);
}

.btn_s { width: 180px; }
.btn_m { width: 280px; }
.btn_l { width: 340px; }


#btm_cta_box {
    display: flex;
    justify-content: center;
    margin: 64px auto 0;
    padding: 32px;
    max-width: var(--max-w-728);
    background-color: var(--gray1-01);
}
.even #btm_cta_box {
    background-color: var(--gray1-04);
}
#btm_cta_box > div {
    flex: 0 0 320px;
}

@media only screen and (max-width: 1024px) {
    section > h3 {
        font-size: var(--fs-ll);
    }
    #menu_box .def_btn {
        border: none;
    }
}
@media only screen and (max-width: 728px) {
    section > h3, section > h3 + p {
        padding: 0 16px;
    }

    h4.title {
        padding: 0 16px;
    }
    .txt_box {
        margin: 0 16px 24px;
    }
}
/* ---- SP ----*/
@media only screen and (max-width: 699px) {

    section:last-child {
        padding-bottom: 0;
    }
    #btm_cta_box {
        display: block;
    }
    #btm_cta_box > div {
        text-align: center;
    }
    #btm_cta_box > div:first-child {
        margin-bottom: 16px;
    }
    #btm_cta_box .cta_btn:last-child {
        margin-left: auto;
    }
}

/*----------------------------------------

	03. main image

----------------------------------------*/

/* メインイメージエリア */
#wrapper #sec-1 {
    padding-bottom: 0;
}

#main_img {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 0 32px;
    max-width: var(--max-w-1500);
}
#main_img > div {
    position: relative;
}

/* メインイメージ左エリア */
#main_img > div:first-child {
    width: 48%;
    z-index: 1;
}
#main_img h2 {
    margin: 0 auto 24px;
    padding: 32px 0;
    width: 100%;
    line-height: 1.1;
    letter-spacing: 4px;
    border-bottom: 1px solid var(--gray2-04);
}
.lp_img #main_img h2,
.lp_img #main_img a:not(.def_btn) p {
    color: var(--white);
}
.lp_img #main_img h2 {
    border-bottom: 1px solid var(--white);
}
#main_img h2 span {
    display: block;
    font-weight: bold;
}
#main_img h2 span.sub {
    font-size: var(--fs-l) !important;
    font-weight: normal;
    letter-spacing: 2px;
}

/* メインイメージ右エリア */
.biz_cloud #main_img > div:last-child {
    width: 52%;
    text-align: center;
}

#main_img > #lp-img-main {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}
.lp_img #lp-img-main img {
    max-width: 100%;
}
.lp_img #lp-img-main:last-child::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
}

/* 月桂冠エリア */
#main_num_flex {
    display: flex;
    margin: 0 auto;
    padding: 0 0 24px;
    width: 80%;
}
#main_num_flex > div {
    flex: 0 0 33.33%;
    padding: 0 4px;
}
#main_num_flex > div img {
    max-width: 100%;
}

/* CTAボタンエリア */
#main_cta_box {
    display: flex;
    justify-content: center;
    margin-top: 32px;
    padding-bottom: 40px;
    z-index: 1;
}
#main_cta_box > div {
    flex: 0 0 50%;
}
.cta_btn {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 8px 0;
    width: 88%;
    height: 72px;
    border-radius: var(--bdr-r-8);
    font-weight: bold;
    transition: var(--def-transition);
    box-shadow: var(--def-shadow);
}
.cta_btn:hover {
    transform: translateY(-2px);
}
.cta_btn > p {
    width: 100%;
    font-size: var(--f-s-12);
    text-align: center;
}
.cta_btn > div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 2px 0 8px;
    width: 100%;
    font-weight: bold;
}
.cta_btn img,
.cta_btn svg {
    margin-right: 8px;
    max-width: 24px;
}

/* ---- aws logo ----*/
#aws_box {
    position: absolute !important;
    top: 96%;
    right: 24px;
    color: var(--white);
    font-size: var(--fs-ss);
    text-align: center;
    z-index: 1;
}

#main_img + p {
    display: none;
}

@media only screen and (max-width: 1200px) {

    .lp_img #lp-img-main img {
        position: absolute;
        top: 0;
        right: -106px;
        max-width: 1000%;
        max-height: 100%;
    }
}
@media only screen and (max-width: 1024px) {

    .biz_edu #main_img {
        padding: 0;
    }

    .shadow_list.thumb_s .card_content {
        min-height: 56%;
    }
}
/*@media only screen and (max-width: 810px) {*/
@media only screen and (max-width: 820px) {

    #sec-1 {
        padding-top: 0 !important;
    }
    #main_img {
        flex-direction: column;
        width: 100%;
    }
    #main_img > div {
        flex: 0 0 100%;
        width: 100% !important;
    }
    #main_img > div:first-child {
        order: 2;
    }
    #main_img > div:last-child {
        order: 1;
    }
}

/* ---- SP ----*/
@media only screen and (max-width: 699px) {

    #main_img {
        padding: 0 24px;
    }
    #main_img h2 {
        letter-spacing: 2px;
    }
    #main_cta_box {
        display: block;
    }
    #main_cta_box > div:last-child {
        margin-top: 24px;
    }
    .cta_btn {
        width: 100%;
    }
    #main_num_flex {
        width: 100%;
    }

    footer > div:first-child {
        height: 72px;
    }
    /* ---- aws logo ----*/
    #aws_box {
        position: static;
        top: 90%;
        right: 0;
        margin: 0 auto;
        padding: 24px;
    }
    .biz_live #aws_box {
        top: 88%;
    }
}


/*----------------------------------------

	04. logo slider

----------------------------------------*/

.slider_container {
    margin-top: 32px;
    overflow: hidden;
}
.slider {
    width: 100%;
    position: relative;
}
.slides {
    display: flex;
    align-items: center;
    width: calc((16.6% * 6) * 2); /* calc((16.6% * n) * 2) nにロゴの数を設定する */
    height: 80px;
    animation: slide 30s linear infinite;
}
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.allow-pause:hover {
    animation-play-state: paused;
}

.slide {
    flex-basis: 50%;
    display:flex;
    align-items: center;
}

.slide div {
    flex-basis: 16.6%;
}
.slide img {
    max-width: 100%;
}

/* ---- SP ----*/
@media only screen and (max-width: 699px) {

    .slides {
        width: calc((33% * 9) * 2);
    }
    .slide div {
        flex-basis: 33%;
    }

}

/*----------------------------------------

	05. flex

----------------------------------------*/

.card_list {
    display: flex;
    flex-wrap: wrap;
    margin: 40px auto 0;
    padding: 0 32px;
    max-width: var(--max-width-1260);
}
.card_list > a, .card_list > div {
    margin: 0 8px 16px;
    padding-bottom: 24px;
    transition: var(--def-transition);
}
.card_list.clm_5 > a, .card_list.clm_5 > div { flex: 0 0 calc(20% - 16px); }
.card_list.clm_4 > a, .card_list.clm_4 > div { flex: 0 0 calc(25% - 16px); }
.card_list.clm_3 > a, .card_list.clm_3 > div { flex: 0 0 calc(33.33% - 16px); }
.card_list.clm_2 > a, .card_list.clm_2 > div { flex: 0 0 calc(50% - 16px); }
.card_list > a {
    border-radius: var(--bdr-r-8);
    box-shadow: var(--def-shadow);
}
.card_list > a:hover {
    box-shadow: var(--def-hvr-shadow);
    transform: translateY(-2px);
}
.card_list .card_thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background-color: var(--gray1-01);
    border-radius: var(--bdr-r-8);

}
.card_list > a:hover .card_thumb {
	border-radius: 8px 8px 0 0;
}
.card_list.gray_list,
.card_list.gray_list .card_thumb {
    background-color: var(--white);
}
.card_list.white_list .card_thumb {
    background-color: var(--white);
}
.card_list .card_thumb img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--bdr-r-8);
}
#example .card_list .card_thumb img {
    border-radius: 0 0 var(--bdr-r-8) var(--bdr-r-8);
}
.card_list .card_thumb img.logo_img {
    max-width: 64%;
    max-height: 72%;
}
.card_list h4,
.card_list p,
.card_list .card_date {
    padding: 0 16px;
}
.card_list h4 {
    margin-top: 24px;
    color: var(--gray2-05);
	font-size: var(--fs-l);
    font-weight: bold;
    text-align: center;
}
.card_list p {
    margin-top: 12px;
    color: var(--gray2-04);
    font-size: var(--f-s-14) !important;
}
/*---- dot list ----*/
.card_content.dot_box > p {
    position: relative;
    margin: 12px 16px 0 2.6rem;
    padding: 2px 0 12px 0;
    border-bottom: 1px solid var(--gray1-03);
}
.card_content.dot_box > p:last-child {
    border-bottom: none;
}
.card_content.dot_box > p::before {
    content: "●";
    position: absolute;
    top: 0;
    left: -19px;
    color: var(--blue-02);
}

/*---- 青い見出し下に↓があるタイプ ----*/
.arrow_list > div {
    padding-bottom: 0;
}
.arrow_list h4 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding: 16px 0;
    min-height: 84px;
    text-align: center;
    color: var(--white) !important;
    background-color: var(--blue-02);
    border-radius: var(--bdr-r-8);
}
.arrow_list h4:before {
    content: "";
    position: absolute;
    bottom: -36px;
    left: 50%;
    margin-left: -18px;
    border: 18px solid transparent;
    border-top: 18px solid var(--blue-02);
    z-index: 2;
}
.biz_edu .arrow_list h4 {
    padding: 16px 0;
    min-height: auto;
}
.arrow_list .card_content {
    padding-top: 24px;
    height: 80%;
}
.arrow_list .dot_box {
    margin-top: 16px;
    padding-bottom: 16px;
    color: var(--gray2-04);
    font-size: var(--f-s-14);
    background-color: var(--gray1-01);
    border-radius: var(--bdr-r-8);
}
.biz_edu .arrow_list .card_content {
    height: 64%;
}
.biz_edu .arrow_list .dot_box {
    background-color: var(--white);
}

body:not(.biz_edu) .arrow_list .dot_box > div:last-child {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
body:not(.biz_edu) .arrow_list .dot_box > div:last-child::before {
    content: "";
    margin: 0;
}
.arrow_list .dot_box > div:first-child {
    text-align: center;
}
.arrow_list .dot_box img {
    max-width: 72%;
}

/*---- 見出しが紺のリスト ----*/
.dark_blue_list > div {
    padding-bottom: 0;
}
.dark_blue_list h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding: 16px 0;
    color: var(--white) !important;
    min-height: 1px;
    background-color: #135d7d;
    border-radius: 0;
}
.dark_blue_list .card_thumb {
    border-radius: 0;
}
.dark_blue_list .card_content {
    position: relative;
    padding-bottom: 8px;
    text-align: center;
    background-color: var(--white);
}
.dark_blue_list .card_content span {
    position: absolute;
    bottom: -26px;
    right: 0;
    font-size: var(--fs-m);
}

/*---- 導入事例 ----*/
.for_list .type_back {
    padding: 0 8px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: var(--white);
    font-size: var(--fs-ss);
    border-radius: 8px 8px 0 0;
}
/* 色指定 */
.list_green_01 .card_thumb,
.type_green_01 .type_back        { background-color: var(--green2-02); }
.type_green_01 .card_thumb span  { color: var(--green2-02); }

.list_blue .card_thumb,
.type_blue .type_back            { background-color: var(--blue-02); }
.type_blue .card_thumb span      { color: var(--blue-02); }

.list_green_02 .card_thumb,
.type_green_02 .type_back        { background-color: var(--green1-02); }
.type_green_02 .card_thumb span  { color: var(--green1-02); }

/* 2024-06-24 */
.list_green_03 .card_thumb,
.type_green_03 .type_back        { background-color: var(--green1-01); }
.type_green_03 .card_thumb span  { color: var(--green1-01); }

.list_white .card_thumb,
.type_white .type_back        { background-color: var(--white); }
.type_white .card_thumb span  { color: var(--white); }

/*--------------------
    EDU 
----------------------*/

/*---- 矢印flex ----*/
.arrow_tit_box {
    position: relative;
    margin: 16px 0;
    padding: 8px 0;
    text-align: center;
    color: var(--white);
    font-size: var(--fs-l);
    border-radius: var(--bdr-r-8);
}
.arrow_tit_list > div:nth-child(1) .arrow_tit_box,
.arrow_tit_list > div:nth-child(1) .card_content::before {
    background-color: var(--blue-03);
}
.arrow_tit_list > div:nth-child(2) .arrow_tit_box,
.arrow_tit_list > div:nth-child(2) .card_content::before {
    background-color: var(--blue-02);
}
.arrow_tit_list > div:nth-child(3) .arrow_tit_box,
.arrow_tit_list > div:nth-child(3) .card_content::before {
    background-color: var(--blue-01);
}
.arrow_tit_box::before { /* 右向き三角形 */
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 24px;
    height: 44px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: var(--white);
}
.arrow_tit_box::after { /* 直角三角形 右上 */
    position: absolute;
    top: -3px;
    right: -11px;
    content: "";
    width: 32px;
    height: calc(32px / 2);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-color: var(--white);
    transform: rotate(45deg);
}
.arrow_tit_box span { /* 直角三角形 左下 */
    display: block;
    position: absolute;
    bottom: -3px;
    right: -11px;
    content: "";
    width: 32px;
    height: calc(32px / 2);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-color: var(--white);
    transform: rotate(134deg);
}
.arrow_tit_list > div:nth-child(1) .arrow_tit_box::before,
.arrow_tit_list > div:nth-child(3) .arrow_tit_box::after,
.arrow_tit_list > div:nth-child(3) .arrow_tit_box span {
    display: none;
}

.arrow_tit_list {
    counter-reset: number 0;
}
.arrow_tit_list > div {
    padding-bottom: 0;
    background: linear-gradient(to bottom, var(--white) 80%, var(--gray1-01) 80%);
}
.even .arrow_tit_list > div {
    padding-bottom: 0;
    background: linear-gradient(to bottom, var(--gray1-01) 80%, var(--white) 80%);
}
.arrow_tit_list .card_thumb {
    background-color: transparent;
}
.arrow_tit_list .card_content {
    position: relative;
    background-color: var(--gray1-01);
}
.even .arrow_tit_list .card_content {
    background-color: var(--white);
}
.arrow_tit_list .card_content::before {
    display: block;
    position: absolute;
    top: -4px;
    left: -28px;
    content: " ";
    width: 88px;
    height: calc(88px / 2);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    transform: rotate(-45deg);
}
.arrow_tit_list .card_content::after {
    display: block;
    position: absolute;
    top: 8px;
    left: 8px;
    counter-increment: number 1;
    content: counter(number, decimal-leading-zero) "";
    color: var(--white);
    font-weight: bold;
}
.arrow_tit_list h4 {
    padding: 48px 32px 0 48px;
    color: var(--darkBlue-03);
    text-align: left;
}
.arrow_tit_list p {
    padding: 8px 32px 32px 48px;
    color: var(--darkBlue-03);
}

/*---- ソリューションflex ----*/
.solution_list .card_thumb {
    flex-direction: column;
}
.solution_list.thumb_s .card_thumb {
    padding-top: 16px;
    aspect-ratio: 0; 
}
.solution_list.thumb_s .card_thumb img {
    max-width: 56%;
}
.solution_list h4 {
    position: relative;
    margin-top: 0;
    padding: 16px 4px 0;
    width: 100%;
    font-size: var(--fs-l);
    border-radius: 0 0 var(--bdr-r-8) var(--bdr-r-8);
}
.solution_list h4:before {
    content: "";
    position: absolute;
    bottom: -54px;
    left: 50%;
    margin-left: -16px;
    border: 16px solid transparent;
    border-top: 16px solid var(--gray2-01);
    z-index: 2;
}
.solution_list h4:after {
    content: "";
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -8px;
    width: 16px;
    height: 10px;
    background-color: var(--gray2-01);
    z-index: 2;
}
.solution_list .card_content {
    padding-bottom: 16px;
    border-radius: 0 0 var(--bdr-r-8) var(--bdr-r-8);
}
.solution_list.thumb_s .card_content {
    min-height: 40%;
}
.biz_live .solution_list.thumb_s .card_content {
    min-height: 32%;
}
.even .solution_list .card_content {
    background-color: var(--white);
}
.odd .solution_list .card_content {
    background-color: var(--gray1-01);
}
/*---- 上矢印エリア ----*/
.solution_list h5 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0 0 0;
    padding: 0 48px;
    min-height: 4.2rem;
    font-size: var(--fs-l);
    font-weight: bold;
    color: var(--white);
    text-align: center;
    background-color: var(--blue-02);
    border-radius: var(--bdr-r-8) var(--bdr-r-8) 0 0;
}
.solution_list h5 img {
    position: absolute;
    top: calc(50% - 18px);
    left: 12px;
    max-width: 32px;
}
.solution_list p {
    font-size: var(--fs-m);
}

.biz_edu .for_list .card_thumb {
    background-color: var(--white);
}

/*--------------------
    LIVE Pack
----------------------*/

/*---- ご利用開始までの流れ ----*/
#flow_until_use > h3 + h4 {
    margin: 24px auto 0;
    text-align: center;
    font-weight: normal;
}
#flow_until_use > h3 + h4 span:last-child {
    font-size: var(--fs-xl);
    font-weight: bold;
    color: var(--orange1-03);
}

.flow_list {
    justify-content: center;
}
.card_list.clm_6 > div {
    flex: 0 0 calc((100% / 6) - 16px);
}
.flow_list > div {
    position: relative;
    background-color: var(--gray1-02);
    border-radius: var(--bdr-r-8);
    border-top: 8px solid var(--blue-02);
}
.flow_list > div::before { /* 右向き三角形 */
    content: "";
    position: absolute;
    top: calc(50% - 22px);
    right: -22px;
    width: 24px;
    height: 44px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: var(--gray1-02);
    z-index: 1;
}
.flow_list > div::after { /* 右向き三角形 */
    content: "";
    position: absolute;
    top: calc(50% - 22px);
    left: 0;
    width: 24px;
    height: 44px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: var(--white);
}
.flow_list > div:first-child::after,
.flow_list > div:last-child::before {
    display: none;
}
.flow_list h4 {
    margin: 0 !important;
}

.img_box {
    margin: 32px auto;
    max-width: var(--max-w-1260);
    text-align: center;
}
.list_box h4 {
    margin-bottom: 24px;
}
.list_box ul {
    border-top: 1px solid var(--gray1-03);
    border-bottom: 1px solid var(--gray1-03);
}
.list_box li {
    position: relative;
    padding: 16px 16px 16px 48px;
    border-bottom: 1px dashed var(--gray1-03);
}
.list_box li:last-child {
    border-bottom: none;
}
.list_box ul li::before {
    content: "●";
    position: absolute;
    top: calc(50% - 12px);
    left: 16px;
    color: var(--green1-02);
    font-size: var(--fs-s);
}

/* ---- TAB & SP ----*/
@media only screen and (max-width: 1024px) {

	.for_list {
		/*margin: 160px auto 0;*/
	}

    /* flexを横スクロールさせる */
    .card_list {
        flex-wrap: nowrap;
        justify-content: flex-start !important;
        overflow-x: auto;
    }

    .card_list.clm_6 > a, .card_list.clm_6 > div,
    .card_list.clm_5 > a, .card_list.clm_5 > div,
    .card_list.clm_4 > a, .card_list.clm_4 > div { flex: 0 0 calc(33.33% - 16px); }

    .biz_edu .arrow_list .card_content {
        height: 80%;
    }
}
/* ---- SP ----*/
@media only screen and (max-width: 699px) {

    .card_list {
        padding: 0 24px;
    }

	.card_list h4 {
		font-size: var(--fs-l);
	}

    .card_list.clm_6 > a, .card_list.clm_6 > div,
    .card_list.clm_5 > a, .card_list.clm_5 > div,
    .card_list.clm_4 > a, .card_list.clm_4 > div,
    .card_list.clm_3 > a, .card_list.clm_3 > div,
    .card_list.clm_2 > a, .card_list.clm_2 > div { flex: 0 0 calc(88% - 16px); }
}

@media only screen and (max-width: 810px) {

    .dark_blue_list .card_content span {
        bottom: -64px;
    }
}

/*----------------------------------------

	06. thanks

----------------------------------------*/

#thanks h2 {
	font-size: var(--fs-ll);
}
#thanks #nav_box {
	padding: 0 24px;
}
#thanks footer p {
	padding: 24px;
	text-align: center;
	font-size: var(--fs-xs);
	background-color: var(--gray1-01);
}

@media only screen and (max-width: 699px) {

	#thanks h2 {
		font-size: var(--fs-l);
	}
	#thanks .txt_box.mt128 {
		margin-top: 160px !important;
	}
}

/*----------------------------------------

	07. list

----------------------------------------*/

/* dl list */
.dl_list {
    display: flex;
    flex-wrap: wrap;
    margin: 24px auto;
    max-width: var(--max-w-728);
    line-height: 1.8;
}
.dl_list dt {
    flex: 0 0 22%;
    margin-bottom: 8px;
    padding: 2px;
    font-weight: bold;
    line-height: 1.2;
}
.dl_list dt span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    width: 100%;
    height: 100%;
    font-weight: bold;
    color: var(--white);
    background-color: var(--blue-02);
    border-radius: var(--bdr-r-8);
}
.dl_list dd {
    flex: 0 0 calc(100% - 22%);
    margin-bottom: 4px;
    padding: 12px;
    border-bottom: 1px solid var(--gray1-03);
}
.dl_list dd:nth-child(2) {
    border-top: 1px solid var(--gray1-03);
}
.dt_32 dt { flex: 0 0 32%; }
.dt_32 dd { flex: 0 0 calc(100% - 32%); }
.dt_40 dt { flex: 0 0 40%; }
.dt_40 dd { flex: 0 0 calc(100% - 40%); }

/* h4 + 文章リスト */
.q_list,
.features_list {
    margin: 24px auto;
    max-width: var(--max-w-728);
}
.q_list li,
.features_list li {
    margin-bottom: 16px;
    padding: 20px 16px 16px 16px;
    background-color: var(--white);
    border-radius: var(--bdr-r-8);
}
.odd .q_list li,
.odd .features_list li {
    background-color: var(--gray1-01);
}
.features_list h4 {
    margin-bottom: 12px;
    padding-bottom: 16px;
    line-height: 1;
    font-weight: bold;
    font-size: var(--fs-l);
    border-bottom: 1px solid var(--gray1-03);
}
.features_list p {
    padding-left: 1.3em;
}
.no_num p {
    padding-left: 0;
}

/* よくある質問（FAQ） */
.q_list h4,
.q_list p {
    position: relative;
    padding-left: 48px;
}
.q_list h4 {
    margin-bottom: 16px;
}
.q_list p {
    color: var(--gray2-04);
}
.q_list h4::before,
.q_list p::before {
    position: absolute;
    top: -4px;
    left: 0;
    display: block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
}
.q_list h4::before {
    content: "Q";
    color: var(--white);
    background-color: var(--green2-02);
}
.q_list p::before {
    content: "A";
    line-height: 28px;
    color: var(--green2-02);
    border: 2px solid var(--green2-02);
}

@media only screen and (max-width: 699px) {

    .q_list,
    .dl_list,
    .features_list {
        margin: 24px 16px;
    }

    .dl_list dt {
        flex: 0 0 100%;
        margin-bottom: 0;
        padding: 0;
    }
    .dl_list dt span {
        padding: 8px;
        border-radius: var(--bdr-r-8) var(--bdr-r-8) 0 0 !important;
    }
    .dl_list dd {
        flex: 0 0 100%;
        margin-bottom: 16px;
        border-radius: 0 0 var(--bdr-r-8) var(--bdr-r-8) !important;
        border-top: none  !important;
        border-left: 1px solid var(--gray1-03);
        border-right: 1px solid var(--gray1-03);
        border-bottom: 1px solid var(--gray1-03);
    }
}