@charset "UTF-8";

@import url(base.css);

img {
	display: inline-block;
	max-width:100%;
	max-height: 100%;
    vertical-align:top;}


html{ scroll-behavior: smooth;scroll-padding-top: 13vw;}

p {font-size: 3.8vw;}

.pc {display: none !important;}

.img100 {
	width: 100%;
	height: auto;}
.img90 {
	width: 90%;
	height: auto;}
.img50 {
	width: 50%;
	height: auto;}
.img45 {
	width: 45%;
	height: auto;}

/*-------------------------------------------------
	++ color
-------------------------------------------------*/
/* mainBlue */
#mainBlue #title {
    background: #003e91 url(../img/form/SP_main_bg_b.jpg) center bottom no-repeat;
    background-size: cover;}
#mainBlue .titleMain {background-color: #0052ce;}
#mainBlue .campaignBtn {background-color: #ff8800;}
#mainBlue .campaignBtn a {color: #ffffff;}
#mainBlue .btnAnchor {background-color: #ff8800;}
#mainBlue .btnAnchor a {color: #ffffff;}
#mainBlue h4 {color: #005be5;}
#mainBlue h5 {color: #fff;background-color: #005be5;}

/* mainGreen */
#mainGreen #title {
    background: #469915 url(../img/form/SP_main_bg_g.jpg) center bottom no-repeat;
    background-size: cover;}
#mainGreen .titleMain {background-color: #348d00;}
#mainGreen .campaignBtn {background-color: #ff8800;}
#mainGreen .campaignBtn a {color: #ffffff;}
#mainGreen .btnAnchor {background-color: #ff8800;}
#mainGreen .btnAnchor a {color: #ffffff;}
#mainGreen h4 {color: #3ba000;}
#mainGreen h5 {color: #fff;background-color: #3ba000;}

/* mainRed */
#mainRed #title {
    background: #ff0607 url(../img/form/SP_main_bg_r.jpg) center bottom no-repeat;
    background-size: cover;}
#mainRed .titleMain {background-color: #bc0000;}
#mainRed .campaignBtn {background-color: #ff8800;}
#mainRed .campaignBtn a {color: #ffffff;}
#mainRed .btnAnchor {background-color: #ff8800;}
#mainRed .btnAnchor a {color: #ffffff;}
#mainRed h4 {color: #d60000;}
#mainRed h5 {color: #fff;background-color: #d60000;}

/* mainOrange */
#mainOrange #title {
    background: #ee7c00 url(../img/form/SP_main_bg_o.jpg) center bottom no-repeat;
    background-size: cover;}
#mainOrange .titleMain {background-color: #d56000;}
#mainOrange .campaignBtn {background-color: #3ba000;}
#mainOrange .campaignBtn a {color: #ffffff;}
#mainOrange .btnAnchor {background-color: #3ba000;}
#mainOrange .btnAnchor a {color: #ffffff;}
#mainOrange h4 {color: #ff7300;}
#mainOrange h5 {color: #fff;background-color: #ff7300;}

/* mainNavyblue */
#mainNavyblue #title {
    background: #ee7c00 url(../img/form/SP_main_bg_nb.jpg) center bottom no-repeat;
    background-size: cover;}
#mainNavyblue .titleMain {background-color: #8c51bf;}
#mainNavyblue .campaignBtn {background-color: #8c51bf;}
#mainNavyblue .campaignBtn a {color: #ffffff;}
#mainNavyblue .btnAnchor {background-color: #8c51bf;}
#mainNavyblue .btnAnchor a {color: #ffffff;}
#mainNavyblue h4 {color: #000a3c;}
#mainNavyblue h5 {color: #fff;background-color: #000a3c;}

/* mainSilver */
#mainSilver #title {
    background: #ee7c00 url(../img/form/SP_main_bg_s.jpg) center bottom no-repeat;
    background-size: cover;}
#mainSilver .titleMain {background-color: #2448ff;}
#mainSilver .campaignBtn {background-color: #ffb400;}
#mainSilver .campaignBtn a {color: #ffffff;}
#mainSilver .btnAnchor {background-color: #ffb400;}
#mainSilver .btnAnchor a {color: #ffffff;}
#mainSilver h4 {color: #ffb400;}
#mainSilver h5 {color: #fff;background-color: #2448ff;}


/*-------------------------------------------------
	++ OUTER
-------------------------------------------------*/
#container {
	margin:0 auto;
	text-align: center;
	position:relative;
    width: 100%;
	min-width:100%;}

.cInner {
	display:block;
	clear:both;
	margin:0 auto;
	text-align: left;
	position:relative;
	padding:4vw 2vw;
    margin-inline: auto;}
.cInner2 {
	display:block;
	clear:both;
	margin:0 auto;
	text-align: left;
	position:relative;
	padding:6vw 2vw 3vw 2vw;}

/*-------------------------------------------------
	++ HEADER
-------------------------------------------------*/
#header {
	position:fixed;
	top:0;
	left:0;
	z-index:9998;
	width:100%;
    margin: 0;
    padding: 0;
	-webkit-overflow-scrolling : touch;
    background-color: #FFFFFF;}
#header .Inner {
    width: 100%;
	height: 12vw;
    padding: 0;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;}
#header .logo {margin: 2% 0 0 1%;width: 45%;}
#header .logo img {width: 100%;}
#header .menu {width: 50%;}
#header .menu ul {width: 100%;display: flex;}
#header .menu li {margin:0 0.5em;display: flex;align-items: center;}
.menuImg01 {width: 75%;margin-top: 1% !important;}
.menuImg02 {width: 25%;}
.menuImg01 img,.menuImg02 img {width: 100%;height: auto;}

/*-------------------------------------------------
	++ title
-------------------------------------------------*/
#title {
    width: 100%;
    position: relative;
    margin: 0;}
.titleMain {
    text-align: center;
    color: #fff;
    font-size: 4vw;
    font-weight: bold;
    line-height: 1.2em;
    padding: 15px 0 10px 0;}
.titleInner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 95%;
    margin: 8% auto;}
.mainTxt {margin: 0;text-align: center;}
.catch {
    font-size: 12vw;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1.2em;
margin: 0;}
.catch2 {
    font-size: 10vw;
    font-weight: bold;
    color: #4d4d4d;
    line-height: 1.2em;
    margin: 0;}
.catch span,
.catch2 span {font-size: 7vw;display: block;line-height: 1em;padding-bottom: 0.5em;}
.catchS {
    color: #FFFFFF;
    font-size: 5vw;
    font-weight: bold;
padding-top: 1em;}
.catchS2 {
    color: #4d4d4d;
    font-size: 5vw;
    font-weight: bold;
    padding-top: 1em;}
.catchSS {
    color: #FFFFFF;
    font-size: 3.5vw;
    font-weight: normal;
padding-top: 0.2em;}
.catchSS2 {
    color: #4d4d4d;
    font-size: 3.5vw;
    font-weight: normal;
    padding-top: 0.2em;}

.campaignBtn {
    width: 90%;
    margin: 20px auto 0 auto;
    border-radius: 30px;}
.campaignBtn a {
    display: block;
    font-weight: bold;
    font-size: 5vw;
    padding: 10px 0;
    line-height: 1.5em;
    text-align: center;}
.campaignBtn a:link,.campaignBtn a:visited {color:#ffffff;text-decoration:none;}
.campaignBtn a:hover,.campaignBtn a:active {color:#ffffff;text-decoration:none;}

/*-------------------------------------------------
	++ BTN
-------------------------------------------------*/
.btnAnchor {
    width: 90%;
    margin: 40px auto;
    border-radius: 50px;}
.btnAnchor a {
    display: block;
    font-weight: bold;
    font-size: 5vw;
    padding: 13px 20px;
    line-height: 1.5em;
    text-align: center;}

.btnInquiry {
    width: 90%;
    margin: 50px auto;
    border-radius: 50px;
    background-color: #529043;}
.btnInquiry a {
    display: block;
    color: #FFF;
    font-weight: bold;
    font-size: 5vw;
    padding: 0px;
    line-height: 3em;
    text-align: center;}
.btnInquiry a:link,.btnInquiry a:visited {color: #FFF;text-decoration:none;}
.btnInquiry a:hover,.btnInquiry a:active {color: #FFF;text-decoration:none;}

/*-------------------------------------------------
	++ others
-------------------------------------------------*/
h3 {
    color: #000;
    text-align: center;
    font-size: 6vw;
    font-weight: bold;
    line-height: 1.3em;
    margin: 0 auto 0.5em auto;}
h4 {
    text-align: left;
    font-size: 5vw;
    font-weight: bold;
    line-height: 1.3em;
    padding: 0;
    margin: 0 auto 0.5em auto;}
h5 {
    font-size: 4vw;
    text-align: left;
    line-height: 1.3em;
    padding: 2vw 0 2vw 3vw;
    margin-bottom: 1em;}

.txtC {
    font-size: 4vw;
    font-weight: bold;
    text-align: left;
    margin: 0 auto;}

.attentionBox {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #ffffe1;
    border-radius: 15px;
    padding: 4vw 5vw;
    margin: 30px 0 0 0;}
.attentionIcon {width: 18%;margin-bottom: 3vw;}
.attentionTxt {
    width: 100%;
    color: #000;
    font-size: 5.5vw;
    font-weight: bold;
    text-align: left;}
.attentionTxt span {
    display: block;
    font-size: 3.5vw;
    font-weight: normal;}

.listDisc {
	margin:20px 0 0 0;}
.listDisc li {
	text-align: left;
    color: #000000;
    font-weight: normal;
	line-height: 1.4em;
    font-size: 3.6vw;
	list-style-type:none;
	padding: 0 0 0.2em 1.0em;
	text-indent: -1.0em;}

/*-------------------------------------------------
	++ FOOTER
-------------------------------------------------*/
#footer {background-color: #f2f2f2;}
.footerInner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    padding: 8vw 3vw;}
.footerItemL {
    width: 100%;
    margin: 0 0 15px 0;
    color: #000000;
    text-align: left;}
.footerItemL p {font-size: 3.4vw;}
.footerLogo {
    width: 85%;
    margin-bottom: 10px;}
.footerItemR {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;}
.footerItemR div {margin: 0 8px;}
.footerInner a:link,.footerInner a:visited {color: #000000;text-decoration:underline;}
.footerInner a:hover,.footerInner a:active {color: #000000;text-decoration:none;}

#pageTop {
    position: fixed;
    bottom: 5vw;
    right: 5vw;
    width: 14vw;
    height: 14vw;}
#pageTop img {
	display:block;}

#iframeID {
    height: 235vw;}