@charset "utf-8";
@import url('components.css');

.bold { font-weight: 600; }
.marker { background: #F2FF55; color: #111;}
.color_navy { color: #003366; }
.color_emerald { color: #005A66; }
.color_lightgreen { color: #4E6600; }
.link { color: #0096bf; position: relative; font-weight: inherit; }
.link::before { content: ""; width: 0; height: 0; height: 0; border-bottom:1px solid #0076BF; position: absolute; left: 0; bottom: 0; transition: width .4s; }
.link:hover::before { width: 100%; }
.indent { text-indent: -1em !important; padding-left: 1em !important;}
blockquote { margin: 3rem; border:1px solid #aaa; padding:3rem; position: relative; }
blockquote::before { content: "“"; font-size: 60px; position: absolute; left: 10px; top:10px; line-height: 1; }
blockquote::after { content: "”"; font-size: 60px; position: absolute; right: 10px; bottom:-25px; line-height: 1; }
img { max-width: 100%; width: auto; height: auto; object-fit: cover; }
a { text-decoration: none; color: #333; }
a.txtlink { color: rgb(5, 178, 226); text-decoration: underline; }
a:hover { text-decoration: none; color: #1f6997; }
.fl { float: left !important; margin-right: 4rem !important; }
.fr { float: right !important; margin-left: 4rem !important; }
.attention { color:#f00; }
.grad { display: inline-block; background: linear-gradient(135deg, #4B7AD8 0%, #49BBE2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: inherit; font-size: inherit; line-height: inherit; }
::selection { background: rgba(0, 0, 0, .75); color: rgba(255, 255, 255, .9); }
ol.list { list-style-type: decimal; margin: 1em auto 1em 1.5em; }
ol.list li { list-style-type: decimal; }
ul.list { list-style-type: none; margin: 1em auto; }
ul.list li { list-style-type: none; position: relative; padding: 0 0 0 1.5em; }
ul.list li::before { content: ""; display: block; position: absolute; left: .45rem; top:calc(50% - 4px); width: 8px; height: 8px; border-radius: 100px; background: linear-gradient(135deg, #2E70CE 0%, #34C9DD 100%); background: -webkit-linear-gradient(-45deg, #2E70CE 0%, #34C9DD 100%); font-size: 1px; line-height: 1; }
img.fadein { opacity : 0.1; transform : translate(0, 50px); transition : all 500ms; }
img.fadein.scrollin { opacity : 1; transform : translate(0, 0); }

.js-fadeIn { opacity: 0; transition: opacity 1s, transform 1s; }
.js-fadeIn.is-inview { opacity: 1; transition-delay: .25s; }
.js-fadeUp { opacity: 0; transform: translateY(5rem); transition: opacity 1s, transform 1s; }
.js-fadeUp.is-inview { opacity: 1; transform: translateY(0); transition-delay: .25s; }
.js-fadeLeft { opacity: 0; transform: translateX(5rem); transition: opacity 1s, transform 1s; }
.js-fadeLeft.is-inview { opacity: 1; transform: translateX(0); transition-delay: .1s; }
.js-fadeRight { opacity: 0; transform: translateX(-5rem); transition: opacity 1s, transform 1s; }
.js-fadeRight.is-inview { opacity: 1; transform: translateX(0); transition-delay: .1s; }
.is-inview.js-list01 { transition-delay: .25s !important; }
.is-inview.js-list02 { transition-delay: .5s !important; }
.is-inview.js-list03 { transition-delay: .75s !important; }
.is-inview.js-list04 { transition-delay: 1s !important; }
.is-inview.js-list05 { transition-delay: 1.25s !important; }
.is-inview.js-list06 { transition-delay: 1.5s !important; }
.is-inview.js-list07 { transition-delay: 1.75s !important; }
.is-inview.js-list08 { transition-delay: 2s !important; }

body { padding: 0 0; max-width: 100%; overflow: hidden; background: #fafafa; }

header { height: 80px; border-bottom: 1px solid rgba(0, 0, 0, .1); display: flex; align-items: center; justify-content: space-between; background: #fff; }
header .logo { margin: 0 0 0 1rem; display: flex; align-items: center; }
header .logo .caption { margin: 0 1rem; font-size: .9rem; }
header .menus { display: flex; align-items: center; }
header .header_contact a { display: flex; width: 240px; height: 80px; align-items: center; justify-content: center; background: linear-gradient(to right,  #ffd923 0%,#ff8a29 100%); color: #fff; font-weight: 600; position: relative; transition: .4s; }
header .header_contact a::before { content: url(../img/ico01.svg); margin: 0 .5rem 0 0; font-size: 1px; line-height: 1px; position: relative; top: 1px; }
header .header_contact a:hover { opacity: .75; }
header .header_menu { display: none; width: 60px; height: 60px; background: url(../img/ico_menu.svg) center no-repeat; }
header .header_menu.active { background-image: url(../img/ico_menu_close.svg); }
nav { display: flex; align-items: center; justify-content: center; height: 80px; width: 100%; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, .1); z-index: 100; }
nav.nav_pc { display: flex; }
nav.nav_sp { display: none; }
nav > ul { display: flex; align-items: center; justify-content: center; }
nav > ul > li { margin: 0 1em; font-weight: 600; position: relative; }
nav > ul > li > span,
nav > ul > li > a { position: relative; font-weight: 600; cursor: pointer; }
nav > ul > li > span::before,
nav > ul > li > a::before { content: ""; display: block; width: 0; height: 1px; overflow: hidden; background: linear-gradient(to right,  #4B7AD8 0%,#49BBE2 100%); position: absolute; left: 50%; bottom: -5px; transition: .4s; }
nav > ul > li > span:hover::before,
nav > ul > li > a:hover::before { width: 100%; left: 0; }

nav > ul > li.nav_point > span,
nav > ul > li.nav_point > a { padding-right: 18px; background: url(../img/ico_menu_down.svg) right center no-repeat; }
nav > ul > li.nav_point > a:hover,
nav > ul > li.nav_point > span:hover {background-image: url(../img/ico_menu_up.svg); }

nav > ul > li > ul { position: absolute; height: 0; width: 22em; transition: .4s; overflow: hidden; background: #fff; z-index: 10; }
nav > ul > li > ul > li a { display: block; padding: 1em 1em 1em 2em; border-bottom: 1px solid rgba(0, 0, 0, .1); line-height: 1; position: relative; }
nav > ul > li > ul > li a::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 100px; background: linear-gradient(to right,  #4B7AD8 0%,#49BBE2 100%); position: absolute; left: 1em; top:calc(50% - 4px); }
nav > ul > li:hover ul { height: 9em; box-shadow: 1px 1px 2px rgba(0, 0, 0, .1); }

.kv .top { background: #fff url(../img/kv_bg.jpg) center center/cover no-repeat; padding: 0 5rem; position: relative; display: flex; align-items: center; }
.kv .top h1 { font-size: min(8vw,2.8rem); padding: 2rem 0 1rem; color: #111; font-weight: 900; }
.kv .top h1 small { font-size: min(5vw, 1.5rem); color: #111; font-weight: 600; display: block; }
.kv .top .img { position: absolute; right: 0; bottom: -5rem; color: #111; font-size: .8rem; text-align: center; }
.kv .top .img img { margin: 0 auto .5em; }
.kv .top p { font-size: 1.1rem; line-height: 2; padding: 0 0 2rem; color: #111; font-weight: 600; word-break: keep-all; }
.kv .top .inr { max-width: 1400px; margin: 0 auto; padding: 0 658px 0 0; min-height: 460px; position: relative; display: flex; align-items: center; }
.kv .bottom { background: linear-gradient(to right,  #FFD923 0%,#FF8A29 100%); padding: 0 5rem; }
.kv .bottom .btn { padding: 1rem 0; max-width: 1400px; margin: 0 auto; }
.kv .bottom .btn a { display: flex; align-items: center; justify-content: center; width: 420px; height: 60px; color: #FF8A29; font-size: min(5vw,1.2rem); font-weight: 600; background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 49%,#e8e8e8 100%); line-height: 1; border-radius: 100px; box-shadow: 1px 1px 3px rgba(0, 0, 0, .1); transition: .4s; position: relative; top:0; }
.kv .bottom .btn a::before { content: url(../img/ico02.svg); margin: 0 .5rem 0 0; font-size: 1px; line-height: 1px; position: relative; top: 1px; }
.kv .bottom .btn a:hover { top: -.25rem; box-shadow: 0 5px 6px rgba(0, 0, 0, .3); }

main { margin: 0 auto; }
article { margin:0 auto 5rem; padding: 0 1rem; max-width: calc(1200px + 2rem); }
article h2 { padding: 5rem 0; text-align: center; font-size: 1.9rem; font-weight: 600; line-height: 1;  }
article h2 span { font-size: min(6vw,1.9rem); font-weight: 600; display: inline-block; position: relative; padding: 0 0 .5rem; margin: 0 auto; line-height: 1.25; word-break: keep-all; text-align: center; }
article h2 span::before { content: ""; display: block; height: 1px; width: 100%; position: absolute; left: 0; bottom: 0; overflow: hidden; background: linear-gradient(to right,  #4B7AD8 0%,#49BBE2 100%); line-height: 1; }
article h2 em { font-size: min(6vw,1.9rem); font-weight: 600; color: #4B7AD8; line-height: 1; }
article h2 small { display: block; font-size: 1rem; text-align: center; line-height: 1; color: rgba(0, 0, 0, .5); }
aside { max-width: 1200px; padding: 2rem; margin:0 auto; background: #fff; box-shadow: 1px 1px 2px rgba(0, 0, 0, .1); }
aside h4 { text-align: center; margin: 0 auto 1rem; }
aside ul li { text-align: center; }

.point {}
.point section { padding: 3rem 0 5rem; margin: -3rem auto 5rem; border-bottom: 5px solid rgba(0, 0, 0, .1); }
.point section:nth-last-of-type(1) { margin: 0 auto; padding: 0; border-bottom: 0; }
.point h3 { line-height: 1.25; font-size: 1.2rem; margin: 0 auto 1rem; }
.point h3 em { line-height: 1.25; font-size: 2rem; font-weight: 600; color: #4B7AD8; margin: 0 1rem 0 0; }
.point p { line-height: 2; margin: 0 auto 2.5rem; }
.point .img ul { margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 1rem 2rem; flex-wrap: wrap; }
.point .img ul li { width: 420px; height: 330px; display: flex; align-items: center; justify-content: center; box-shadow: 1px 1px 2px rgba(0, 0, 0, .1); background: #fff; }

.flow { display: flex; justify-content: center; gap: 1rem; margin: 0 auto 2.5rem; flex-wrap: wrap; }
.flow dl { width: 320px; background: #666; position: relative; }
.flow dl:nth-of-type(1) { background: #5897E5; }
.flow dl:nth-of-type(2) { background: #3AB0DB; }
.flow dl:nth-of-type(3) { background: #11B68D; }
.flow dl:nth-of-type(1)::after { content: ""; display: block; position: absolute; right: -25px; top:calc(50% - 25px); width: 0; height: 0; border-style: solid; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 25px solid #78B2ED; border-right: 0; z-index: 5;}
.flow dl:nth-of-type(2)::after { content: ""; display: block; position: absolute; right: -25px; top:calc(50% - 25px); width: 0; height: 0; border-style: solid; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 25px solid #57C6E6; border-right: 0; z-index: 5;}
.flow dl dt { padding:calc(1rem + 100px) 1rem 3rem; text-align: center; color: #fff; font-weight: 600; font-size: 1.2rem; position: relative; }
.flow dl dt::before { content: ""; position: absolute; left: calc(50% - 50px); top:1rem; }
.flow dl:nth-of-type(1) dt { background: #78B2ED; }
.flow dl:nth-of-type(2) dt { background: #57C6E6; }
.flow dl:nth-of-type(3) dt { background: #1FCBA9; }
.flow dl:nth-of-type(1) dt::before { content: url(../img/ico04.svg);}
.flow dl:nth-of-type(2) dt::before { content: url(../img/ico05.svg);}
.flow dl:nth-of-type(3) dt::before { content: url(../img/ico06.svg);}
.flow dl dd { padding: 2rem; color: #fff; }
.flow dl dd p em { font-weight: 600; line-height: 1.5; }
.flow dl dd p { margin: 0 auto; line-height: 1.5; }

.contactbtn { background: linear-gradient(to right,  #FFD923 0%,#FF8A29 100%); padding: 1rem; display: flex; align-items: center; justify-content: center; }
.contactbtn a { display: flex; align-items: center; justify-content: center; width: 600px; height: 80px; color: #FF8A29; font-size: min(5vw,1.2rem); font-weight: 600; background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 49%,#e8e8e8 100%); line-height: 1; border-radius: 11px; box-shadow: 1px 1px 3px rgba(0, 0, 0, .1); transition: .4s; position: relative; top:0; }
.contactbtn a::before { content: url(../img/ico02.svg); margin: 0 .5rem 0 0; font-size: 1px; line-height: 1px; position: relative; top: 1px; }
.contactbtn a:hover { top: -.25rem; box-shadow: 0 5px 6px rgba(0, 0, 0, .3); }

.feature {}
.feature .feature_logo { text-align: center; padding: 5rem 0 1rem; }
.feature .feature_caption { text-align: center; line-height: 2; font-weight: 600; margin: 0 auto; font-size: min(4vw,1rem); }
.feature .feature_list { display: flex; justify-content: center; gap: 1rem 2rem; flex-wrap: wrap; }
.feature .feature_list dl { width: 460px; background: linear-gradient(to right,  #4B7AD8 0%,#49BBE2 100%); }
.feature .feature_list dd { padding: 2rem; }
.feature .feature_list h3 { line-height: 1.5; color: #fff; font-size: 1.2rem; font-weight: 600; margin: 0 auto 1rem; word-break: keep-all; }
.feature .feature_list h3 em { line-height: 1; color: #fff; font-size: 2.4rem; font-weight: 600; display: block; margin: 0 auto 1rem; }
.feature .feature_list p { line-height: 2; color: #fff; }

/*
.comparison_table { max-width: 900px; margin: 0 auto; box-shadow: 0 0 1px rgba(0, 0, 0, .5); position: relative; background: #fff; }
.comparison_table::before { content: ""; display: block; width: 0; height: 100%; border-left: 1px solid rgba(0, 0, 0, .1); position: absolute; top:0; left: calc(100% / 3); }
.comparison_table::after { content: ""; display: block; width: 0; height: 100%; border-left: 1px solid rgba(0, 0, 0, .1); position: absolute; top:0; right: calc(100% / 3); }
.comparison_table ul { display: flex; }
.comparison_table ul li { font-size: min(2.5vw,1rem); width: calc(100% / 3); min-height: 80px; padding: 1rem; display: flex; align-items: center; justify-content: center; text-align: center; }
.comparison_table ul li span { text-align: center; font-weight: 600; }
.comparison_table ul li small { font-size: min(2.5vw,.8rem); }
.comparison_table ul li em { font-size: 2rem; display: block; text-align: center; }
.comparison_table h3 { font-size: min(3vw,1.2rem); background: #e6e6e6; text-align: center; line-height: 1; padding: .5rem; }
.comparison_table .top ul li:nth-of-type(1) { background: #4B7AD8; color: #fff; }
.comparison_table .top ul li:nth-of-type(2) { background: #FFFCE9; }
.comparison_table .top ul li:nth-of-type(3) { background: #EEFBED; }
.comparison_table .body ul li:nth-of-type(1) { background: #4B7AD8; color: #fff; }
*/

.comparison_table { max-width: 1000px; margin: 0 auto; }
.comparison_table > .spcaption { display: none; margin: 1rem auto; line-height: 1; }
.comparison_table .inr { max-width: 100%; overflow: auto; }
.comparison_table .inr table { border-collapse: collapse; width: 100%; }
.comparison_table .inr table thead th { border:1px solid rgba(0, 0, 0, .2); vertical-align: middle; text-align: center; padding: 1rem; white-space: nowrap; font-weight: 600; }
.comparison_table .inr table tbody th { border:1px solid rgba(0, 0, 0, .2); vertical-align: middle; text-align: left; padding: 1rem; white-space: nowrap; font-weight: 600; }
.comparison_table .inr table tbody td { border:1px solid rgba(0, 0, 0, .2); vertical-align: top; text-align: center; padding: 1rem; white-space: nowrap; }
.comparison_table .inr table tbody td span { text-align: center; }
.comparison_table .inr table tbody td small { font-size: .8rem; }
.comparison_table .inr table tbody td em { font-size: 2rem; display: block; text-align: center; }
.comparison_table .inr table tbody td h3 { font-size: 1.2rem; background: #e6e6e6; text-align: center; line-height: 1; padding: .5rem; }
.comparison_table .inr table thead .mainv { background: #fff; border:5px solid #0070C0; border-bottom: none; }
.comparison_table .inr table thead .subv01 { background: #ffc; }
.comparison_table .inr table thead .subv02 { background: #DBF2D0; }
.comparison_table .inr table tbody .cat_l { background: #D9D9D9; }
.comparison_table .inr table tbody .cat_m { background: #F2F2F2; }
.comparison_table .inr table tbody .mainv { background: #E6EFFF; border-left:5px solid #0070C0; border-right:5px solid #0070C0; }
.comparison_table .inr table tbody .subv01 { background: #fff; }
.comparison_table .inr table tbody .subv02 { background: #fff; }
.comparison_table .inr table tbody tr:nth-last-of-type(1) .mainv { border-bottom:5px solid #0070C0; }


.subtxt { }
.subtxt p { padding: 2rem 1rem; text-align: center; font-size: min(2.5vw,1rem); }

/*
footer { background: #fff; padding: 2rem 1rem; }
footer h6 { text-align: center; margin: 0 auto 2rem; }
footer ul { display: flex; align-items: center; justify-content: center; gap: 1rem 2rem; margin: 0 auto 1rem; flex-wrap: wrap; }
footer ul li { text-align: center; }
footer .copyright { text-align: center; line-height: 1; }
footer .copyright small { font-size: .8rem; line-height: 1; }
*/





@media print, screen and (max-width:1200px){
  .fl { float: none !important; margin-right:0 !important; }
  .fr { float: none !important; margin-left: 0 !important; }
  .imgcolumn { display: block; }
  .imgcolumn .img { margin: 0 auto 1.5rem; }
  blockquote { margin: 1.5rem; padding: 1.5rem; }
  blockquote::before { left: 0; top: 0; }
  .is-inview.js-list01,
  .is-inview.js-list02,
  .is-inview.js-list03,
  .is-inview.js-list04,
  .is-inview.js-list05,
  .is-inview.js-list06,
  .is-inview.js-list07,
  .is-inview.js-list08 { transition-delay:.25s !important; }

	body { padding-top: 60px; }
  header { height: 60px; position: fixed; left: 0; top: 0; width: 100%; z-index: 100; }
  header .logo .image img { height: 30px; }
  header .logo .caption { display: none; }
  header .header_contact a { width: 150px; height: 60px; font-size: .9rem; }
	header .header_menu { display: block; }

  nav { width: 100%; height: auto; max-height: 0; position: fixed; left: 0; top: 60px; display: block; box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1); overflow: hidden; transition: .4s; }
	nav.nav_pc { display: none; }
	nav.nav_sp { display: block; }
  nav.active { max-height: 100vh; }
	nav > ul { display: block; }
	nav > ul > li { margin: 0; }
	nav > ul > li > span,
	nav > ul > li > span,
	nav > ul > li > a { display: block; padding: 1rem; border-bottom: 1px solid rgba(0, 0, 0, .1); }
	nav > ul > li > span::before,
	nav > ul > li > a::before { bottom: 0; }
	nav > ul > li.nav_point > span { padding-right: 16px; background: url(../img/ico_menu_down.svg) calc(100% - 10px) center no-repeat; }
	nav > ul > li > ul { position: static; height: auto; max-height: 0; width: auto; }
	nav > ul > li.hover > ul { max-height: 10rem; }
	nav > ul > li > ul > li a { margin: 0 0 0 1rem; display: block; padding: 1em 1em 1em 2em; border-bottom: 1px solid rgba(0, 0, 0, .1); line-height: 1; position: relative; }
	nav > ul > li > ul > li a::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 100px; background: linear-gradient(to right,  #4B7AD8 0%,#49BBE2 100%); position: absolute; left: 1em; top:calc(50% - 4px); }
	nav > ul > li:hover ul { height: 9em; box-shadow: 1px 1px 2px rgba(0, 0, 0, .1); }

  .kv .top { margin-top: -60px; padding: 60px 2rem 2rem; }
  .kv .top h1 { line-height: 1.25; }
  .kv .top h1 small { margin-bottom: .3em; }
  .kv .top p { line-height: 1.75; }
  .kv .top .inr { padding: 0; display: block; }
  .kv .top .img { position: relative; right: auto; bottom: auto; }
  .kv .bottom { padding: 0 1rem;}
  .kv .bottom .btn a { width: 100%; }

  article { margin: -60px auto 3rem; padding-top: 60px; }
  article h2 { padding: 3rem 0;}
  .point h3 em { display: block; margin: 0 0 .5rem; }
  .point p { margin: 0 auto 3rem; line-height: 1.75; }
  .point .img ul li { width: 100%; height: auto; padding: 1rem; }
  .point section { padding: 5rem 0 3rem; margin: -5rem auto 3rem; }
  .flow { margin: 0 auto 3rem; }
  .flow dl { width: 100%; }
  .flow dl dt { padding-bottom:2rem;}
  .flow dl dd { padding: 1rem; }
	.flow dl:nth-of-type(1)::after { top:auto; right: calc(50% - 25px); bottom: -24px; border-right: 25px solid transparent; border-left: 25px solid transparent; border-top: 25px solid #5897E5; border-bottom: 0; }
	.flow dl:nth-of-type(2)::after { top:auto; right: calc(50% - 25px); bottom: -24px; border-right: 25px solid transparent; border-left: 25px solid transparent; border-top: 25px solid #3AB0DB; border-bottom: 0; }

	.feature .feature_list dl { width: 100%; }
  .feature .feature_list dd { padding: 1rem; }
  .feature .feature_list p { line-height: 1.5; }
  .contactbtn a { height: auto; padding: 1rem .5rem; }
}

@media print, screen and (max-width:640px){
/*
  .comparison_table .body ul li span { min-height: 7.5em; }
  .comparison_table ul li em { line-height: 1; margin: 0 auto .5rem; }
  footer ul li { width: 100%; }
*/
.comparison_table > .spcaption { display: block; }
}





/* ======== footer style ===== */
#footer {
	background: #f5f5f5;
	font-size: 1.3rem;
}

#footer .inner {
	position: relative;
	margin: 0 auto;
	padding-top: 35px;
}

#footer #btn-pagetop {
	position: relative;
	width: 80px;
	height: 80px;
	background: #989898;
	font-size: 1.2rem;
	text-align: center;
	z-index: 99;
  display: block;
  position: absolute;
  top: -80px;
  right: 0px;
}

#footer #btn-pagetop a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding-top: 40px;
	color: #fff;
}

#footer #btn-pagetop a::before {
	display: block;
	position: absolute;
	top: 22px;
	right: 0;
	left: 0;
	width: 21px;
	height: 15px;
	margin: auto;
	background: url(/assets/images/common/arrow-white.svg) no-repeat center;
	background-size: contain;
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	transform: rotate(-180deg);
	-webkit-transition: top 0.2s linear;
	transition: top 0.2s linear;
	content: "";
}

#footer #btn-pagetop a:hover::before {
	top: 18px;
}

#footer a {
	color: #221814;
	text-decoration: none;
  font-size: 13px;
}

#footer .footer-upper-nav,
#footer .footer-lower-nav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-lines: multiple;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

#footer .footer-upper-nav li,
#footer .footer-lower-nav li {
	margin: 0 20px;
}

#footer .footer-lower-nav {
	margin-bottom: 22px;
	font-size: 1.2rem;
}

#footer .footer-lower-nav li {
	margin: 0 21px;
}

#footer .footer-logo-area {
	border-top: 1px solid #cbc9c8;
}

#footer .footer-logo-area ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	margin: 30px 0 35px;
}
#footer .footer-logo-area p {
	text-align: center;
	line-height: 1;
	font-size: 13px;
	margin-top: -20px;
	margin-bottom: 30px;
}
#footer .footer-logo-area ul li {
	margin: 0 20px;
}
#footer .footer-logo-area ul li:nth-child(1) img { width: 64px; height: 75px; }
#footer .footer-logo-area ul li:nth-child(2) img { width: 53px; height: 75px; }
#footer .footer-logo-area ul li:nth-child(3) img { width:128px; height: 75px; }

#footer .footer-logo-area ul li:nth-child(2) {
	margin-right: 43px;
	margin: 0 21px;
}

#footer .footer-logo-area ul li:nth-child(2) a:hover {
	opacity: 0.8;
}

#footer .copyright {
	display: block;
	margin: 0 auto;
	padding-bottom: 5px;
	font-size: 12px;
	text-align: center;
}

#footer .top-note {
	position: absolute;
	bottom: 30px;
	left: 20px;
	color: #8c8c8c;
	font-size: 1rem;
}

#footer .top-note li {
	position: relative;
	padding-left: 25px;
	line-height: 1.25;
}

#footer .top-note li span {
	position: absolute;
	left: 12px;
}

#footer .note:before {
	content: "※";
	position: absolute;
	width: auto;
	height: auto;
	top: 0;
	left: 0;
	margin: 0;
	background-color: transparent !important;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}

@media screen and (max-width: 767px) {
	#footer .inner {
		padding-top: 50px;
		padding-bottom: 20px;
		padding-bottom: 0;
	}

	#footer #btn-pagetop {
		position: relative;
		top: -50px;
		right: 0;
		width: 100%;
		height: 55px;
	}

	#footer #btn-pagetop a {
		padding-top: 22px;
		font-size: 1rem;
	}

	#footer #btn-pagetop a::before {
		top: 15px;
		width: 15px;
		height: 10px;
	}

	#footer #btn-pagetop a:hover::before {
		top: 10px;
	}

	#footer .footer-upper-nav {
		margin-bottom: 25px;
	}

	#footer .footer-lower-nav li {
		margin: 0 10px 8px;
	}

	#footer .footer-logo-area ul {
		margin-top: 60px;
	}

	#footer .footer-logo-area ul li {
		margin: 0 18px;
	}

	#footer .footer-logo-area ul li img {
		width: 55px;
		height: 65px;
	}

	#footer .footer-logo-area ul li:nth-child(2) {
		margin-right: 18px;
	}

	#footer .footer-logo-area ul li:nth-child(2) img {
		width: 46px;
		height: 65px;
	}

	#footer .footer-logo-area ul li:nth-child(3) {
		margin-right: 0;
	}

	#footer .footer-logo-area ul li:nth-child(3) img {
		width: 111px;
		height: 65px;
	}

	#footer .top-note {
		width: calc(100% - 40px);
		position: relative;
		bottom: auto;
		margin-bottom: 30px;
	}

	#footer .top-note li {
		line-height: 1.65;
	}
}