@charset "UTF-8";

/***********************************************/
/* CSS file For Hunglead, Inc. */
/* FileName: main_style_mat_201810.css */
/* Use: 資料DLフォームページ用スタイル */
/* data: 2018/10/16 */
/* index: */
/*   1 Universal Reset */
/*   2 Basic Style */
/*   3 for Tablet */
/*   4 for PC */
/***********************************************/




/* ------------------------------------------------------- */
/* ===== Universal Reset ===== */
/* ------------------------------------------------------- */
* {
 margin: 0;
 padding: 0;
}

a {
 text-decoration: none;
}

ul,ol {
 list-style: none;
}

img {
 border: 0;
 height: auto;
 vertical-align: middle;
}

a img {
 border-width: 0;
 border-style: none;
}

form {
 margin: 0;
 padding: 0;
}

input, textarea{
 font-size: x-small;
 padding:8px;
 width:100%;
 color:#555;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 -ms-box-sizing:border-box;
 -o-box-sizing:border-box;
 box-sizing:border-box;
 border:1px solid #aaaaaa;
 background:#ffffff;
 transition:background .4s ease-out,color .4s ease-out;
 -webkit-transition:background .4s ease-out,color .4s ease-out;
 -moz-transition:background .4s ease-out,color .4s ease-out;
 -ms-transition:background .4s ease-out,color .4s ease-out;
 -o-transition:background .4s ease-out,color .4s ease-out;
}


/* ------------------------------------------------------- */
/* ===== Basic Style ===== */
/* ------------------------------------------------------- */

body {
 background: #fff;
 font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
 font-size: 16px;
 line-height: 1.5;
 color: #333;
}

h1 {
 font-size: 20px;
 font-weight: normal;
 text-align: center;
 line-height: 1.4;
}

h3 {
 font-weight: bold;
 font-size: 16px;
}

p {
 margin-bottom: 0;
}

a,
a:link,
a:visited {
 color: #1e4992;
 text-decoration: none;
 transition: all .3s ease-out;
 -webkit-transition: all .3s ease-out;
 -moz-transition: all .3s ease-out;
 -ms-transition: all .3s ease-out;
 -o-transition: all .3s ease-out;
}

a:hover {
 color: #ffbf00;
}

a img {
 opacity: 1;
 transition: all 0.3s ease-out;
 -webkit-transition: all 0.3s ease-out;
 -moz-transition: all 0.3s ease-out;
 -ms-transition: all 0.3s ease-out;
 -o-transition: all 0.3s ease-out;
}

a:hover img {
 opacity: 0.7 !important;
}


.red {
 color: #e50000;
}

.error_message {
 color: #e50000;
}

.pad10 {
 padding: 10px;
}

br.show {
 display: inline !important;
}

/* ------------------------------------------------------- */
/* ===== for SmartPhone ===== */
/* ------------------------------------------------------- */

.dis-pc {
 display: none !important;
}
.dis-sp {
 display: inline !important;
}



#main-area {
 background: #f1fbff;
 padding: 40px 0;
}

h1.mainlogo {
 text-align: center;
 font-size: 16px;
}

h1.mainlogo img {
 width: 120px;
 margin-right: 7px;
 vertical-align: middle;
}

#catch {
 padding: 20px 15px 0;
}

#main-area ul {
 display: flex;
 justify-content: space-between;
 margin: 15px auto 0;
 max-width: 800px;
 width: 98%;
}

#main-area li {
 font-size: 12px;
 text-align: left;
 width: 33%;
 padding: 0 10px;
}

#main-area li img {
 display: block;
 margin: 0 auto 15px;
 width: 60%;
 max-width: 98px;
}

#main-area li br {
 display: none;
}

#footer {
 text-align: center;
 padding: 20px;
 font-size: 12px;
 background: #555;
 color: #fff;
}




.btnTop {
 position: fixed;
 bottom: 0;
 right: 0;
 font-size: 12px;
 padding: 20px 10px;
 background: rgba(30,72,146,0.7);
 color: #fff;
 transition: all .3s ease-out;
 z-index: 9999;
}

.btnTop:hover{
 background:rgba(30,72,146,1);
 cursor:pointer;
 padding:20px;
}


section#form-area {
/* background-color: #f0f4fc;*/
 background-color: #f1fbff;
}

#formWrapper {
 padding: 15px;
 margin: 0 10px;
 border: #ddd 1px solid;
 background: #fff;
 border-radius: 20px;
}

#formWrapper h2 {
 display: none;
}

#formWrapper > p {
 font-size: 12px;
 text-align: left;
 margin-top: 10px;
}


#formArea {
 margin: 20px auto 0;
}

.formCont{
/* overflow:hidden;*/
 margin:0 auto;
 padding:0;
 }

.formCont li{
 margin-bottom:18px;
 list-style-type:none;
 }

.formCont h3{
 font-weight:normal;
 font-size:14px;
 margin-bottom:10px;
 position:relative;
 line-height:20px;
 }

.formCont h3 span {
 font-size: 12px;
 display: block;
}




.formCont h3::after{
 display:inline-block;
 content:"任意";
 height:10px;
 width:20px;
 background:#6078a1;
 color:#fff;
 margin:0 0 0 5px;
 vertical-align:top;
 padding:4px 5px;
 font-size:10px;
 line-height:1;
 }

.formCont h3.must::after {
 content:"必須";
 background:#cc0000;
 }



#formArea p,
#formAreaFin p{
 margin:5px 0 10px;
 position:relative;
 }
 
.formCont li input{
 padding:12px;
 font-size:16px;
 border:1px solid #999;
 width:100%;
 box-sizing:border-box;
 }

.formCont h3 a,
.formCont h4 a{
 font-size:16px;
 padding:2px 0;
 display:inline-block;
 text-align:center;
 border-radius:50%;
 line-height:1;
 margin:0 0 0 4px;
 width:20px;
 background:#1e4892;
 color:#fff;
 transition:all 0.3s ease-out;
 }

.formCont h3 a:hover,
.formCont h4 a:hover{
 background:#ffaa00;
 color:#333;
 }

.formCont h4{
 font-size:14px;
 margin: 15px 0 10px;
 line-height: 1.3;
 }

.formCont.remarks {
 margin-top: 20px;
}


.formCont textarea{
 height:120px;
 font-family:'Lato','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
 font-size: 16px;
 }

#formContEnd p.pMark{
 margin:0 30px;
 padding:20px 65px 20px 0;
 text-align:right;
 font-size:12px;
 background-image:url(../images/common/img_pmark.png);
 background-repeat:no-repeat;
 background-size:50px;
 background-position:right;
 }



#formArea li input:focus{
 background:#efefef;
}

#formArea li input[type="checkbox"] {
 display: inline;
 width: 20px;
}

#formArea p.ppag-box label {
/* width: calc(100% - 26px);*/
 display: inline-block;
}

#formArea .submitBtn {
 text-align: center;
}

.ppag-box {
 margin: 20px auto 0 !important;
}

.ppag-box label,
.ppag-box input[type='checkbox'] {
 cursor: pointer;
}

#formArea button,
#form-box button,
#formArea input[type="submit"] {
 display: inline-block;
 text-align: center;
 border-radius: 6px;
 box-sizing: border-box;
 background: #1d4892;
 color: #fff;
 padding: 14px;
 font-size: 16px;
 margin: 10px auto;
 border: 1px solid #1d4982;
 box-shadow: 0 6px 0 0 #0a3683;
 width: 100%;
 position: relative;
 max-width: 450px;
 transition: 0.2s all;
 }

#formArea button:hover,
#form-box button:hover,
#formArea input[type="submit"]:hover {
 background:#ffbf00;
 color:#333;
}

#formArea p.pMark{
 padding:20px 65px 20px 0;
 text-align:right;
 font-size:12px;
 background-image:url(../images/common/img_pmark.png);
 background-repeat:no-repeat;
 background-size:50px;
 background-position:right;
 max-width: 390px;
 margin: 0 auto;
}

#form-area #catch h1{
 text-align: center;
 color: #333;
font-size: 24px;
}

#form-area #catch .sp_flow {
 list-style: none;
 overflow: hidden;
 display: table;
 width: 100%;
}

#form-area #catch .sp_flow li {
 background-color: #666;
 line-height: 30px;
 color: #FFFFFF;
 display: table-cell;
 font-size: 12px;
 padding: 0 10px;
 text-align: center;
 text-decoration: none;
 width: 33%;
}

#form-area #catch .sp_flow li:last-child {
padding-right: 0;
}

#form-area #catch .sp_flow li::after {
 background-color: #666;
 border-right: 1px solid #fff;
 content: " ";
 display: block;
 height: 15px;
 margin-left: auto;
 margin-right: -15px;
 margin-top: -15px;
 position: relative;
 -o-transform: skew(-15deg);
 -ms-transform: skew(-15deg);
 -moz-transform: skew(-15deg);
 -webkit-transform: skew(-15deg);
 transform: skew(-15deg);
 width: 10px;
}


#form-area #catch .sp_flow li::before {
 background-color: #999;
 border-right: 1px solid #fff;
 content: " ";
 display: block;
 float: right;
 height: 15px;
 margin-bottom: -15px;
 margin-left: auto;
 margin-right: -15px;
 -o-transform: skew(15deg);
 -ms-transform: skew(15deg);
 -moz-transform: skew(15deg);
 -webkit-transform: skew(15deg);
 transform: skew(15deg);
 width: 10px;
}

#form-area #catch .sp_flow li.active,
#form-area #catch .sp_flow li.active::after,
#form-area #catch .sp_flow li.active::before {
/* background-color: #1B73BA;*/
 background-color: #1d4892;
}


#form-area #catch p{
 text-align: center;
 color: #333;
 margin-top: 5px;
}

.cautionBox {
 font-size: 12px;
}

.cautionBox a {
 text-decoration: underline;
 color: #c00;
}





#mat-area {
 background: #fff;
 display: flex;
 flex-direction: column-reverse;
 padding: 20px 0 0;
}

#mat-area #mat-list {
 padding: 30px 15px;
}

#mat-area #mat-list p {
 text-align: center;
}

#mat-area #mat-list ul {
 display: flex;
 justify-content: space-between
}

#mat-area #mat-list li {
 font-size: 12px;
 text-align: center;
 margin: 0 0 10px;
}

#mat-area #mat-list li img {
 display: block;
 width: 80%;
 max-width: 140px;
 margin: 0 auto 5px;
}

#mat-area #mat-list h2 {
 background: #eee;
 border-radius: 40px;
 font-size: 14px;
 font-weight: normal;
 padding: 2px 5px;
 text-align: center;
 margin: 10px auto 7px;
}

#mat-area #mat-list div ul {
 display: block;
}




#powered_by_me {
 font-size: 10px;
 color: #666;
}


div.err {
 clear:both;
 text-align:left;
 margin:5px 0px 0px 0px;
 color:#c00;
 font-size:12px;
 line-height:normal;
 padding:4px 10px;
 border-radius:4px;
 }



#mat-list-box {
 display: none;
 }

#mat-list a {
 display: block;
}



.remodal p.closeBtn button {
border: none;
 font-size:16px;
 display:block;
 background:#1e4892;
 text-align:center;
 border-radius:6px;
 padding:15px 20px;
 color:#fff;
 margin: 0 auto;
 width: auto;
 }

.remodal p.closeBtn button:hover {
 background:#ffbf00;
 color:#333;
 }

.remodal p.closeBtn button:focus {
 outline:0;
}


/************ thanks page ************/
#thankswrapper {
 max-width: none;
}

#thankswrapper #main-area {
 padding: 40px 0 0;
}


#thankswrapper #catch p {
 font-size: 13px;
}

#thankswrapper #mat-area {
 background: #f1fbff;
 margin: 0;
 max-width: none;
}

#thankswrapper #mat-list {
 box-sizing: border-box;
 display: block;
 max-width: 1200px;
 margin: 0 auto;
 padding: 30px 15px 0;
 width: 100%;
}


#thankswrapper #mat-list > div {
 text-align: center;
 margin-bottom: 50px;
 position: relative;
}

#thankswrapper #mat-list div::before {
 content: none;
}

#thankswrapper #mat-list > div img {
 width: 100%;
 opacity: 1;
}

#thankswrapper #mat-list > div div {
 width: 60%;
 margin: 0 auto;
 position: relative;
 cursor: pointer;
}

#thankswrapper #mat-area #mat-list h2 {
 background: none;
 color: #333;
 font-size: 18px;
 font-weight: bold;
 margin: 15px auto;
 padding: 0;
}

#thankswrapper #mat-area #mat-list h2 + p {
 color: #333;
 text-align: left;
 font-size: 15px;
 font-weight: normal;
 margin: 0;
}

#thankswrapper #mat-list > div div:hover {
background: #fff
}

#thankswrapper #mat-list a {
 display: block;
}

/*
#thankswrapper #mat-list div.mat_new div::after {
 content: none;
}*/

#thankswrapper #mat-list div.mat_new div::after {
 background: #cc0000;
 color: #fff;
 content: "NEW";
 display: block;
 font-size: 16px;
 font-family: Verdana, Roboto, YuGothic, Meiryo, sans-serif;
 border-radius: 50%;
 width: 50px;
 padding: 18px 6px;
 position: absolute;
 top: 10px;
 right: -10px
}


#thankswrapper #mat-list a p.btn-dl {
 background: #1d4892;
 border: 1px solid #1d4982;
 box-shadow: 0 6px 0 0 #0a3683;
 border-radius: 6px;
 box-sizing: border-box;
 color: #fff;
 cursor:pointer;
 font-size: 16px;
 margin: 15px auto 0;
 text-decoration: none;
 transition: all .3s ease-out;
 padding: 10px;
 position: relative;
 text-align: center;
 width: 80%;
 }
 
#thankswrapper #mat-list p.btn-dl::after {
 position: absolute;
 top: 50%;
 right: .8em;
 content: '';
 margin-top: -5px;
 border: 7px solid transparent;
 border-top-width: 5px;
 border-bottom-width: 5px;
 border-left-color: #fff;
 transition: all .2s;
 }

#thankswrapper #mat-list a:hover p.btn-dl {
 background:#ffbf00;
 color:#333;
}

#thankswrapper #mat-list a:hover p::after {
 border-left-color: #000;
}


/************ demomovie page ************/
#demowrapper #main-area {
 background: #fff
}

#demowrapper h1 img {
 display: block;
 margin: 0 auto 10px;
}

#demowrapper #catch p {
 font-size: 13px;
}


#demowrapper #mat-area {
 display: block;
 padding: 0;
}

#demowrapper .video-box {
 text-align: center;
}

#demowrapper .video-box video {
 width: 96%;
 max-width: 960px;
 margin: 0 auto;
}

#foot-area {
 text-align: center;
 padding: 0 10px;
 margin: 20px auto 0;
 max-width: 800px;
 width: 100%;
 box-sizing: border-box;
}

#foot-area h2 {
/* background: #fff;*/
 font-weight: bold;
 font-size: 16px;
 margin-bottom: 15px;
 position: relative;
 border: 1px solid #1e4892;
 border-radius: 20px;
 padding: 5px;
 color: #1e4892;
}


#foot-area p {
 font-size: 22px;
 padding: 0 20px 20px;
 color: #1e4892;
 }


#foot-area p span{
 font-size:14px;
 display:block;
}


/* ------------------------------------------------------- */
/* ===== for Tablet ===== */
/* ------------------------------------------------------- */

@media screen and (min-width : 480px){

#formArea li input{
 padding:12px;
}


}


/* ------------------------------------------------------- */
/* ===== for PC 768 ===== */
/* ------------------------------------------------------- */

@media screen and (min-width : 768px) {


h1.mainlogo {
 font-size: 30px;
}

h1.mainlogo img {
 width:210px;
 margin-right: 10px;
}


#catch {
 text-align: center;
}


#main-area li {
 font-size: 14px;
 text-align: center;
}

#main-area li br {
 display: inline;
}

#mat-area {
 margin-top: 20px;
 flex-direction: row;
 padding: 20px;
 justify-content: space-between;
}



#mat-area #mat-list {
 padding: 0;
 width: 45%;
}

#mat-area #mat-list p {
 text-align: left;
 font-weight: bold;
 margin-bottom: 35px;
}

#mat-area #mat-list > div {
 display: flex;
 justify-content: space-between;
}

section#form-area {
 position: absolute;
 width: calc(45% - 25px);
 top: 0;
 height: 100%;
 right: 0;
}

#form-area-box {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
}



#formWrapper {
 margin: 0;
 width: 45%;
 border: 0;
 box-shadow: 0 0 10px #ccc;
}


#formWrapper > p {
 font-size: 14px;
}

#formWrapper #formArea {
 max-width: 900px;
 margin: 40px auto 0;
}



#formArea .basicForm li:nth-of-type(5) h3,
#formArea #formContEnd .formCont h3 {
 margin-top: 0;
}
/*
#formArea .basicForm p,
#formArea .basicForm ul,
#formArea #formContEnd .formCont > p,
#formArea #formContEnd .formCont > div {
 max-width: 450px;
 width: 50%;
}*/

#formArea .selectrobot label{
 font-size:16px;
 }
 
 #formArea .selectrobot label span {
 font-size: 80%;
 }
 
#formArea h3 span {
 margin-left: 10px;
 display: inline-block;
}

#formArea button,
#form-box button,
#formArea input[type="submit"] {
 cursor: pointer;
 }




#balloon {
 display: inline-block;
 position: fixed;
 bottom: 80px;
 cursor: pointer;
 right:2%;
 width: 141px;
 height: 141px;
 z-index: 555;
 transition: 0.2s bottom;
}

.btnTop {
 display: none !important;
}


.remodal p.closeBtn button {
 width:280px;
 margin:0 auto 40px;
}
    

/*mat-detail*/
.remodal.mat-detail p {
 font-size: 18px;
}



/************ thanks page ************/

#thankswrapper #mat-list {
 display:-ms-flexbox;
 display: flex;
 justify-content:left;
 flex-wrap: wrap;
 padding: 40px 10px 0;
 width: 100%;
}

#thankswrapper #mat-list > div {
 width: 50%;
 box-sizing: border-box;
 padding: 0 30px;
 margin-bottom: 60px;
}

#thankswrapper #mat-list > div div,
#thankswrapper #mat-list > div img,
#thankswrapper #mat-list a p.btn-dl {
 width: 100%;
 }

#thankswrapper #catch p {
 margin-top: 20px;
 font-size: 15px;
 text-align: center;
}

/************ demomovie page ************/
#demowrapper #catch p {
 text-align: left;
}









}




/* ------------------------------------------------------- */
/* ===== for PC 1000 ===== */
/* ------------------------------------------------------- */


@media screen and (min-width : 1000px){



.dis-pc {
 display: inline !important;
}

.dis-sp {
display: none !important;
}

#main-area ul {
 margin: 40px auto 0;
}

#main-area li {
 font-size: 16px;
 font-weight: bold;
 color: #666;
}

#balloon img {
 filter: none;
}

.cautionBox {
 font-size: 14px;
}

.download-list {
 margin-bottom: 50px;
 padding: 0 15px;
}

.download-list ul {
 display: flex;
 flex-wrap: wrap;
}

.download-list li {
 width: 50%;
 line-height: 1.8;
 font-size: 15px;
}


#formArea button,
#formArea input[type="submit"] {
 font-size: 16px;
}




#mat-area {
 margin: 0 auto;
 max-width: 1200px;
 padding: 20px 0 40px;
}



#mat-area #mat-list {
 margin: 0;
 padding: 40px 0 0;
}


#mat-area #mat-list h2 {
 padding: 4px 25px;
}

#mat-area #mat-list li {
 margin: 0 0 30px;
}

#mat-area #mat-list li img {
 width: 100%;
}

#mat-list p.btn-dl {
 text-align: center;
 border-radius: 6px;
 box-sizing: border-box;
 background: #11326a;
 color: #fff;
 padding: 10px;
 font-size: 16px;
 margin: 15px auto 0;
 border: 1px solid #11326a;
 box-shadow: 0 6px 0 0 #092454;
 width: 100%;
 text-decoration: none;
 transition: all .3s ease-out;
 position: relative;
 opacity: 0.5;
 }
 
 
#mat-list a p.btn-dl {
 background: #1d4892;
 border: 1px solid #1d4982;
 box-shadow: 0 6px 0 0 #0a3683;
 cursor:pointer;
 opacity: 1;
 }
 
 #mat-list p.btn-dl::after {
 position: absolute;
 top: 50%;
 right: .8em;
 content: '';
 margin-top: -5px;
 border: 7px solid transparent;
 border-top-width: 5px;
 border-bottom-width: 5px;
 border-left-color: #fff;
 transition: all .2s;
 }
 
 #mat-list a:hover p.btn-dl {
 background:#ffbf00;
 color:#333;
}


/*#mat-area #mat-list > div:hover ~ #balloon {
 bottom:90px;
}
*/

#formWrapper {
 padding: 40px;
 max-width: 600px;
 margin: 40px 0 0;
 box-sizing: border-box;
 }

#formWrapper h2 {
display: block;
font-size: 22px;
text-align: center;
}

#formWrapper > p {
 text-align: center;
}



/************ thanks page ************/

#thankswrapper #mat-list {
 margin: 0 auto;
}

#thankswrapper #mat-list > div {
 width: 33%;
}


#thankswrapper #mat-area {
 padding: 20px 0 0;
}

/************ demomovie page ************/
#demowrapper h1 img {
 margin: 0 auto 20px;
}

#demowrapper #catch p {
 margin-top: 20px;
 font-size: 15px;
 text-align: center;
}

}