@charset "UTF-8";

@import url(base.css);

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

p {font-size: 3.5vw;}

.pc,.pc845 {
	display: none !important;}

.img100 {
	width: 100%;
	height: auto;}
.img70 {
	width: 70%;
	height: auto;}
.img50 {
	width: 50%;
	height: auto;}
.img30 {
	width: 30%;
	height: auto;}

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

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

/*-------------------------------------------------
	++ HEADER
-------------------------------------------------*/
#header {
        width: 100%;
        background-image: url(../img/SPmain.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center top;
        aspect-ratio: 5 / 9;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;}
#header h1 {
    width: 80%;
    margin: 5vw auto 0 auto;}
#header h1 img {
    width: 100%;}
#header p {
    color: #fff;
    text-align: center;
    font-size: 5vw;
    font-weight: bold;
    line-height: 1.4em;
    text-shadow: #000 1px 0 10px;
    margin-top: 3%;}

.patent {
    max-width: 95%;
    position: absolute;
    bottom: 8px;
    border-radius: 30px;
    padding: 5px 30px;
    display: inline-table;
    text-align: left;
    margin: 0;
    color: #000;
    text-shadow: none;
    font-size: 3vw;
    font-weight: normal;}

/*-------------------------------------------------
	++ BTN
-------------------------------------------------*/
.AppsBoxHeader {
    width: 90%;
    position: absolute;
    bottom: 35px;
    margin: 3% 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 1%;}
.AppsBoxHeader h2 {
    width: 100%;
    color: #00ac3e;
    text-align: center;
    margin: 0 auto;
    font-size: 4vw;
    font-weight: bold;
    line-height: 1.3em;
    margin-bottom: 0;}

.AppsBox,
.AppsBox2 {
    margin: 0 auto 6vw auto;
    display: flex;
    justify-content: center;
    align-items: center;}
.AppsBox2Imte {
    width: 40%;
    padding: 0;
    margin: auto 2%;}
.AppsBox2Imte.w48 {width: 48%;margin: auto 2%;}
.Apple {width: 40%;margin: auto 2%;}
.Google {width: 48%;margin: auto 2%;}
.Apple img,.Google img,.Apple2 img,.Google2 img {width: 100%;}

/*-------------------------------------------------
	++ others
-------------------------------------------------*/
h2 {
    color: #00ac3e;
    text-align: center;
    margin: 0 auto;
    font-size: 4.8vw;
    font-weight: bold;
    line-height: 1.5em;
    margin-bottom: 0.5em;}

.DiscussionMenuBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;}
.DiscussionMenuItem {width: 33%;}

.DiscussionTtlBox {
    display: flex;
    border-radius: 10px;
    background-color: #FFF;
    margin-bottom: 1em;}
.DiscussionTtlL {
    width: 20%;
    color: #fff;
    font-weight: bold;
    font-size: 4vw;
    line-height: 1.3em;
    text-align: center;
    padding: 0px;;
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;}
.DiscussionTtlR {
    width: 80%;
    color: #000;
    font-weight: bold;
    font-size: 4vw;
    text-align: left;
    line-height: 1.3em;
    padding: 10px 10px;}
.DiscussionTtlR span {font-size: 3vw; display: block;}

.DiscussionBox01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0 auto;}
.DiscussionBox01Item {
    width: 400px;
    margin: 0 0 5vw 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;}
.DiscussionBox01Img {
    width: 25%;
    margin: 0;}
.DiscussionBox01Img img {width: 100%;}
.DiscussionBox01ItemList {width: 75%;}
.DiscussionBox01ItemTtl {
    font-size: 4vw;
    font-weight: bold;
    padding-bottom: 0.3em;}

.DiscussionBox02 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    margin: 0 auto;}
.DiscussionBox02Ttl {
    width: 25%;
    height: auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    margin-bottom: 15px;}
.DiscussionBox02Ttl p {
    width: 85%;
    height: 21vw;
    color: #fff;
    font-weight: bold;
    font-size: 3.5vw;
    display: flex;
    align-items: center;
    justify-content: center;}
.serifu01 {background-image: url(../img/serifu01.png);}
.serifu02 {background-image: url(../img/serifu02.png);}
.serifu03 {background-image: url(../img/serifu03.png);}
.serifu04 {background-image: url(../img/serifu04.png);}
.serifu05 {background-image: url(../img/serifu05.png);}
.serifu06 {background-image: url(../img/serifu06.png);}
.DiscussionBox02Txt {
    width: 75%;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 15px;}

.listDisc {
	margin:0;}
.listDisc li {
	text-align: left;
    color: #000000;
    font-size: 3.5vw;
	line-height: 1.5em;
	list-style-type:none;
    font-weight: bold;
	padding: 0 0 0 1.0em;
	text-indent: -1.0em;}
.listDisc li.txtL {font-size: 3.4vw;font-weight: bold;}
.listDisc li.txtLL {font-size: 3.8vw;font-weight: normal;}

.bgDiscussion01 {background-color: #f3ffd6;}
.bgDiscussion02 {background-color: #fff7e7;}
.bgDiscussion03 {background-color: #ffedf1;}
.bgDiscussion04 {background-color: #e5f4ff;}
.bgDiscussion05 {background-color: #ffedff;}
.bgDiscussion06 {background-color: #ebf1ff;}

.bgDiscussion012 {background-color: #00ac3e;}
.bgDiscussion022 {background-color: #ffae00;}
.bgDiscussion032 {background-color: #ff5200;}
.bgDiscussion042 {background-color: #0092ff;}
.bgDiscussion052 {background-color: #ff83a5;}
.bgDiscussion062 {background-color: #0050ff;}

.borderDiscussion01 {border: 1px #00ac3e solid;}
.borderDiscussion02 {border: 1px #ffae00 solid;}
.borderDiscussion03 {border: 1px #ff5200 solid;}
.borderDiscussion04 {border: 1px #0092ff solid;}
.borderDiscussion05 {border: 1px #ff83a5 solid;}
.borderDiscussion06 {border: 1px #0050ff solid;}

.txtDiscussion01 {color: #00ac3e;}
.txtDiscussion02 {color: #ffae00;}
.txtDiscussion03 {color: #ff5200;}
.txtDiscussion04 {color: #0092ff;}
.txtDiscussion05 {color: #ff83a5;}
.txtDiscussion06 {color: #0050ff;}

.Advisor01Box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 15px 0 0 0;}
.Advisor01Img {width: 38%;}
.Advisor01Txt {width: 60%;}
.Advisor01Txt p {font-weight: bold;}
.AdvisorfunctionBox {
    background-color: #ddf4e5;
    border-radius: 10px;
    padding: 10px;
    margin: 0 0 10px 0;}
.AdvisorfunctionBox .ttl {
    color: #00ac3e;
    font-weight: bold;
    font-size: 4vw;
    padding-bottom: 0.3em;}
.Advisor01Txt .Img {
    width: 100%;
    display: flex;
    justify-content: center;}
.Advisor01Txt .Img img {width: 80%;}

.Advisor02Box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;}
.Advisor02Item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.8em;}
.Advisor02Item .Img {width: 30%;}
.Advisor02Item p {
    width: 68%;
    font-size: 3vw;
    padding-top: 0;}

.Advisor03Box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;}
.Advisor03Item {width: 100%;}

.bgShare {background-color: #ddf4e5;}
.ShareBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;}
.ShareItem {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;}
.ShareItem .Img {width: 35%;margin: 0 0 3% 0;}
.ShareItem p {
    width: 63%;
    font-weight: bold;
    padding-top: 0;}

/* youtube/pdf */
.youtubeBox {
	width:100%;
	text-align:left;
	margin:0px auto 10vw auto;}
.youtube {
	position:relative;
	padding-top:56.25%;
	overflow: hidden;
	border:5px #DBDBDB solid;
	margin:5px 0px;}
.youtube iframe {
	position:absolute;
	top:0;
	right:0;
	left:0;
	width:100%;
height:100%;}

/*-------------------------------------------------
	++ FOOTER
-------------------------------------------------*/
#footer {
    margin: 0px;
	padding: 40px 0;
	font-size:2.8vw;
    background-color: #fff;
	color: #b2b2b2;
	text-align: center;}
#footer .logo {margin: 0 auto;width: 60%;}
#footer .logo img {width: 100%;}

#pageTop {
	position: fixed;
	bottom: 5vw;
  	right: 5vw;
  	width: 12%;
	z-index:9998;}
#pageTop img {
	display:block;}