@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap&subset=japanese');

/* ===================================================================

 file name  :  common.css

=================================================================== */

/* --------------------------------------------------
 normalize.css v3.0.2 | MIT License | git.io/normalize
--------------------------------------------------- */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}h1,h2,h3,h4,h5{font-weight:normal;font-size:100%;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}small{font-size:80%;}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;vertical-align:bottom;}svg:not(:root){overflow:hidden;}figure{margin:0;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}pre{overflow:auto;}code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace;}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver;}legend{padding:0;border:0;}textarea{overflow:auto;}optgroup{font-weight:bold;}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}ul{padding:0;}ul li{list-style:none;}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%; font-size: 62.5%;}
body{
    min-width: 1090px;
    width: 100%;
    background: #fff;
    color: #000;
    font-size: 1.5rem;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1;
}

/* any kind of style
--------------------------------------------------- */
*, *:after, *:before{ box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
img{ vertical-align: bottom;}
address{ font-style: normal;}
strong{ display: inline; padding: 0 2px; font-size: 1.9rem;}
em{ display: inline; padding: 0 2px; color: #e83828; font-style: normal;}
.cs{ color: #ccc;}
a{ color: #029ee8; text-decoration: underline;}
a:hover{ text-decoration: none;}
.clear:after{ display: block; clear: both; content: "";}
.none{ display: none;}
.color{ color: #e83828;}
.sp{ display: none;}

@media screen and (max-width: 768px){
    body{ min-width: 0; font-size: 1.3rem;}
    img{ max-width: 100%; width: auto; height: auto;}
    strong{ font-size: 1.5rem;}
    .pc{ display: none;}
    .sp{ display: block;}
    .wrap-table{ overflow-x: scroll; -webkit-overflow-scrolling: touch; margin: 15px 0 0;}
}

/* any kind of layout
--------------------------------------------------- */
.w10{ width: 10%;}
.w25{ width: 25%;}
.w30{ width: calc(100% / 3);}
.w50{ width: 50%;}
.w75{ width: 75%;}

.inner{ margin: 0 auto; width: 1090px;}

.fl-left{ float: left;}
.fl-right{ float: right;}

.table2{ display: table; width: 100%;}
.table2-1{ display: table-cell; width: 50%; vertical-align: top;}
.table2-2{ display: table-cell; width: 50%; vertical-align: top;}

.table3{ display: table; width: 100%;}
.table3-1{ display: table-cell; width: calc(100% / 3); vertical-align: top;}
.table3-2{ display: table-cell; width: calc(100% / 3); vertical-align: top;}
.table3-3{ display: table-cell; width: calc(100% / 3); vertical-align: top;}

.table4{ display: table; width: 100%;}
.table4-1{ display: table-cell; width: 25%; vertical-align: top;}
.table4-2{ display: table-cell; width: 25%; vertical-align: top;}
.table4-3{ display: table-cell; width: 25%; vertical-align: top;}
.table4-4{ display: table-cell; width: 25%; vertical-align: top;}

.row2:after{ display: block; clear: both; content: "";}
.row2-1{ float: left; padding: 0 30px 0 0; width: 50%;}
.row2-2{ float: right; padding: 0 0 0 30px; width: 50%;}

@media screen and (max-width: 768px){
    .w10{ width: 10%;}
    .w25{ width: 25%;}
    .w30{ width: calc(100% / 3);}
    .w50{ width: 50%;}
    .w75{ width: 75%;}

    .inner{ padding: 0 20px 30px; width: 100%;}

    .table2{ display: block;}
    .table2-1{ display: block; width: 100%;}
    .table2-2{ display: block; width: 100%;}

    .table3{ display: block;}
    .table3-1{ display: block; width: 100%;}
    .table3-2{ display: block; width: 100%;}
    .table3-3{ display: block; width: 100%;}
    
    .table4{ display: block;}
    .table4-1{ display: block; width: 100%;}
    .table4-2{ display: block; width: 100%;}
    .table4-3{ display: block; width: 100%;}
    .table4-4{ display: block; width: 100%;}

    .row2-1{ float: none; padding: 0; width: 100%;}
    .row2-2{ float: none; padding: 0; width: 100%;}
}

/* any kind of module
--------------------------------------------------- */
.triangle{ position: relative;}
.triangle:after{ position: absolute; right: 2px; bottom: 2px; border-width: 0 0 12px 12px; border-style: solid; border-color: transparent transparent #00b1ec transparent; content: "";}

.icon{ position: relative;}
.icon:before{ position: absolute; top: 50%; right: 20px; margin: -7px 0 0; width: 14px; height: 14px; border-radius: 100%; background: #029ee8; content: "";}
.icon:after{ position: absolute; top: 50%; right: 25px; margin: -3px 0 0; border-width: 3px 0 3px 5px; border-style: solid; border-color: transparent transparent transparent #fff; content: "";}

.btn{ text-align: right;}
.btn a,
.btn span{ position: relative; display: inline-block; padding: 0 20px 0 0; color: #000; text-decoration: none; font-weight: bold; font-size: 1.7rem;}
.btn a:before,
.btn span:before{ position: absolute; top: 50%; right: 0; margin: -7px 0 0; width: 14px; height: 14px; border-radius: 100%; background: #029ee8; content: "";}
.btn a:after,
.btn span:after{ position: absolute; top: 50%; right: 4px; margin: -3px 0 0; border-width: 3px 0 3px 5px; border-style: solid; border-color: transparent transparent transparent #fff; content: "";}
.btn a:hover{ color: #029ee8;}

.shadow a{ display: block; padding: 20px; border-radius: 2px; background: #fff; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1); color: #000; text-decoration: none; line-height: 1.5;}

@media screen and (max-width: 768px){
    .triangle:after{ content: none;}
    .btn{ margin: 20px 0 0;}
    .btn a,
    .btn span{ padding: 10px 30px 10px 15px; border-radius: 30px; background: #eee; font-size: 1.3rem;}
    .shadow a{ padding: 0; border-radius: 0; box-shadow: none;}
    .btn a:before,
    .btn span:before{ right: 10px;}
    .btn a:after,
    .btn span:after{ right: 14px;}
}

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ position: relative;}
.header h1{ position: absolute; top: 20px; left: 20px; width: 330px;}
.header h1 img{ width: 100%;}
.header nav{ display: flex; margin: 0 auto; padding: 100px 0 0; width: 1090px; text-align: center;}
.header .nav1{ display: flex; width: 66%;}
.header .nav1 li{ padding: 5px 0; width: 20%; border-right: 1px solid #ccc;}
.header .nav1 li:first-child{ border-left: 1px solid #ccc;}
.header .nav2{ display: flex; padding: 0 0 0 15px; width: 34%;}
.header .nav2 li{ padding: 0 0 0 10px; width: 50%;}
.header .nav2 a{ display: block; height: 30px; background: linear-gradient(135deg, rgba(2,158,232,1) 0%,rgba(2,158,232,1) 50%,rgba(0,144,211,1) 51%,rgba(0,144,211,1) 100%); color: #fff; text-decoration: none; font-weight: bold; font-size: 1.3rem; line-height: 30px;}
.header .nav2 a:hover{ background: #333;}
.header .nav2 i{ display: inline-block; margin: 0 5px 0 0;}

.header aside{ position: absolute; top: 0; right: 0; padding: 20px 15px; background: #dae000;}
.header aside ul{ text-align: right; font-size: 0;}
.header aside li{ display: inline-block; margin: 0 0 0 15px; vertical-align: top; text-align: left; font-size: 1.3rem;}
.header aside li:first-child{ margin: 0;}
.header aside div{
    position: relative;
    display: inline-block;
    margin: 0 5px 0 0;
    width: 40px;
    height: 40px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNzI3MTcxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNzI3MTcxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: linear-gradient(135deg, rgba(114,113,113,1) 0%,rgba(114,113,113,1) 50%,rgba(102,102,102,1) 51%,rgba(102,102,102,1) 100%);
    color: #fff;
    vertical-align: middle;
    text-align: center;
    line-height: 40px;
}
.header aside span{ position: relative; display: inline-block; vertical-align: top; font-weight: bold; font-size: 2.5rem;}
.header aside small{ display: block; margin: 3px 0 0; font-weight: normal; font-size: 1.1rem;}
.header aside a{
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNzI3MTcxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNzI3MTcxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: linear-gradient(135deg, rgba(114,113,113,1) 0%,rgba(114,113,113,1) 50%,rgba(102,102,102,1) 51%,rgba(102,102,102,1) 100%);
    color: #fff;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
}
.header aside a:after{ position: absolute; bottom: 4px; left: 50%; margin: 0 0 0 -10px; width: 20px; height: 1px; background: #fff; content: "";}

@media screen and (max-width: 768px){
    .header{ display: none;}
    .header-sp{ border-bottom: 1px solid #eee;}
    .header-sp header{ position: relative; padding: 0 0 0 10px; height: 60px; background: #fff; line-height: 60px;}
    .header-sp img{ width: 100%; vertical-align: bottom;}
    .header-sp h1{ z-index: 99999999; display: inline-block; width: 65%;}
    .header-sp h1 a{ display: block;}
    .header-sp.stuck{ position: fixed; top: 0; left: 0; z-index: 99999; width: 100%;}
}

.header2{ position: fixed; top: -80px; left: 0; z-index: 99999; width: 100%; height: 80px; box-shadow: 0 3px 2px -2px rgba(0,0,0,.2);}
.header2 header{ position: relative; display: flex; width: 100%; height: 80px; background: rgba(255,255,255,1); justify-content: space-between; align-items: center;}
.header2 h1{ padding: 10px 0 0 20px;}
.header2 h1 a{ display: block;}
.header2 h1 img{ width: auto; height: 40px;}

.header2 nav{ display: flex; justify-content: center; align-items: center;}

.header2 .nav1{ display: flex; font-size: 1.4rem; align-items: center;}
.header2 .nav1 > li{ padding: 0 20px; border-right: 1px solid #ccc;}
.header2 .nav1 > li:first-child{ border-left: 1px solid #efefef;}

.header2 .nav2{ display: flex; padding: 0 0 0 10px; align-items: center;}
.header2 .nav2 > li{ margin: 0 0 0 10px;}
.header2 .nav2 a{ display: flex; width: 140px; height: 30px; background: linear-gradient(135deg, rgba(2,158,232,1) 0%,rgba(2,158,232,1) 50%,rgba(0,144,211,1) 51%,rgba(0,144,211,1) 100%); color: #fff; text-align: center; text-decoration: none; white-space: nowrap; font-weight: bold; font-size: 1.2rem; justify-content: center; align-items: center;}
.header2 .nav2 a:hover{ background: #333;}
.header2 .nav2 i{ display: inline-block; margin: 0 5px 0 0;}

.header2 .nav3{ display: flex; padding: 0 15px; height: 80px; background: #dae000; align-items: center;}
.header2 .nav3 > li{ display: flex; margin: 0 0 0 15px; font-size: 1.5rem; align-items: center;}
.header2 .nav3 > li:first-child{ margin: 0;}
.header2 .nav3 div{ position: relative; display: flex; margin: 0 5px 0 0; width: 40px; height: 40px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNzI3MTcxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNzI3MTcxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: linear-gradient(135deg, rgba(114,113,113,1) 0%,rgba(114,113,113,1) 50%,rgba(102,102,102,1) 51%,rgba(102,102,102,1) 100%); color: #fff; font-size: 1.3rem; justify-content: center; align-items: center;}
.header2 .nav3 span{ position: relative; display: inline-block; vertical-align: middle; font-weight: bold; font-size: 1.7rem; line-height: 1;}
.header2 .nav3 small{ display: block; margin: 2px 0 0; font-weight: normal; font-size: 1rem; line-height: 1.2;}
.header2 .nav3 a{ position: relative; display: flex; width: 40px; height: 40px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNzI3MTcxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNzI3MTcxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: linear-gradient(135deg, rgba(114,113,113,1) 0%,rgba(114,113,113,1) 50%,rgba(102,102,102,1) 51%,rgba(102,102,102,1) 100%); color: #fff; text-decoration: none; font-size: 1.3rem; justify-content: center; align-items: center;}
.header2 .nav3 a:after{ position: absolute; bottom: 4px; left: 50%; margin: 0 0 0 -10px; width: 20px; height: 1px; background: #fff; content: "";}

@media screen and (max-width: 1480px){
    .header2 .nav2{ flex-direction: column; padding: 0 0 0 20px;}
    .header2 .nav2 > li{ margin: 0;}
    .header2 .nav2 > li + li{ margin: 5px 0 0;}
    .header2 .nav2 a{ height: 25px; font-size: 1.1rem;}
}

@media screen and (max-width: 1360px){
    .header2 h1 img{ height: 35px;}
    .header2 .nav1 > li{ padding: 0 10px;}
}

@media screen and (max-width: 1280px){
    .header2 h1{ display: none;}
    .header2 .nav1{ padding: 0 0 0 20px; font-size: 1.2rem;}
    .header2 .nav2{ flex-direction: row; padding: 0 0 0 10px;}
    .header2 .nav2 > li{ margin: 0 0 0 10px;}
    .header2 .nav2 > li + li{ margin: 0 0 0 10px;}
    .header2 .nav2 a{ width: 130px; font-size: 1rem;}
    .header2 .nav3{ display: flex; padding: 0 15px; height: 80px; background: #dae000; align-items: center;}
    .header2 .nav3 > li{ margin: 0 0 0 10px; font-size: 1.4rem;}
    .header2 .nav3 div{ width: 35px; height: 35px; font-size: 1.2rem;}
    .header2 .nav3 span{ font-size: 1.4rem;}
    .header2 .nav3 small{ font-size: 1rem;}
    .header2 .nav3 a{ width: 35px; height: 35px; font-size: 1.2rem;}
    .header2 .nav3 a:after{ bottom: 4px; margin: 0 0 0 -8px; width: 16px;}
}

@media screen and (max-width: 1090px){
    .header2{ display: none;}
}

/* top
--------------------------------------------------- */
.top .header{ position: relative; height: 685px; background: url("/img/main.jpg") no-repeat top center / cover;}
.top .header .nav1 li{ border-right: 1px solid #fff;}
.top .header .nav1 li:first-child{ border-left: 1px solid #fff;}
.top .header .nav1 a{ color: #fff;}
.top .header p{ position: absolute; top: 50%; left: 50%; margin: -56px 0 0 -330px; width: 660px;}
.top .header p img{ width: 100%;}

@media screen and (max-width: 768px){
    .hero img{ vertical-align: top;}
}

/* news
--------------------------------------------------- */
.news{ margin: 30px 0 0; padding: 30px; border-radius: 2px; background: #fff; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1); color: #000; text-decoration: none;}
.news .inner{ display: table; width: 100%;}
.news .btn{ margin: 30px 0 0;}
.news h2{ display: table-cell; width: 20%; vertical-align: top; text-align: left;}
.news .list-news{ display: table-cell; width: 80%; vertical-align: top;}

@media screen and (max-width: 768px){
    .news{ margin: 30px 0 0; padding: 30px 0 0; border-top: 1px solid #eee; border-radius: 0; box-shadow: none;}
    .news .inner{ display: block; padding: 0;}
    .news .btn{ margin: 30px 0 0;}
    .news h2{ display: block; width: 100%;}
    .news .list-news{ display: block; width: 100%;}
}

.list-news li{ border-bottom: 1px solid #efefef; font-size: 0; line-height: 1.5;}
.list-news li:first-child{ border-top: 1px solid #efefef;}
.list-news li a{ display: block; padding: 15px 0; text-decoration: none; font-size: 0;}
.list-news time{ display: inline-block; width: 15%; color: #000; vertical-align: top; font-size: 1.6rem;}
.list-news .cat{ display: inline-block; width: 15%; vertical-align: top; font-size: 1.2rem;}
.list-news .cat span{ display: inline-block; padding: 6px 18px; background: #727171; color: #fff; line-height: 1;}
.list-news h3{ display: inline-block; padding: 0; width: 70%; border: none; color: #029ee8; vertical-align: top; font-weight: normal; font-size: 1.4rem;}
.list-news a h3{ text-decoration: underline;}
.list-news a:hover h3{ text-decoration: none;}

@media screen and (max-width: 768px){
    .list-news{ margin: 15px 0 0;}
    .list-news li:first-child{ border-top: none;}
    .list-news li a{ padding: 15px 0;}
    .list-news time{ width: auto; color: #000; vertical-align: middle; font-size: 1.2rem;}
    .list-news .cat{ margin: 0 0 0 10px; width: auto; vertical-align: middle; font-size: 1.2rem;}
    .list-news .cat span{ padding: 5px 15px; font-size: 1rem;}
    .list-news h3{ display: block; margin: 10px 0 0; width: 100%; font-size: 1.3rem; line-height: 1.8;}
}

.pager{ margin: 60px 0 0; text-align: center;}
.pager a,
.pager span{ display: inline-block; margin: 0 2px; padding: 0; width: 30px; height: 30px; border: 1px solid; color: #727171; vertical-align: top; text-decoration: none; line-height: 30px;}
.pager span{ background: #727171; color: #fff;}
.pager .pages{ display: none;}
.pager .first,
.pager .previouspostslink,
.pager .nextpostslink,
.pager .extend,
.pagee .last{ width: auto; border: none; background: none; color: #727171;}

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

.entry{ padding: 60px; border-radius: 2px; background: #fff; box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1); color: #000; text-decoration: none;}
.entry time{ display: inline-block; margin: 15px 0 0; color: #999; font-size: 1.4rem;}
.entry time + span{ display: inline-block; margin: 15px 0 0 30px; color: #999; font-size: 1.4rem;}
.entry + .btn{ margin: 30px 0 0;}
.entry .entry-content img{ max-width: 100%; width: auto;}

@media screen and (max-width: 768px){
    .entry{ margin: 30px 0 0; padding: 0; border-radius: 0; box-shadow: none;}
    .entry time{ margin: 15px 0 0; font-size: 1.2rem;}
    .entry time + span{ margin: 15px 0 0 20px; font-size: 1.2rem;}
    .entry .entry-content{ padding: 15px 0 0;}
    .entry + .btn{ margin: 30px 0 0;}
}

/* --------------------------------------------------
 main
--------------------------------------------------- */
.list-content{ margin: -80px 0 0; text-align: center; font-size: 0;}
.list-content li{ display: inline-block; margin: 0 0 0 20px; width: 530px; vertical-align: top; font-size: 1.5rem;}
.list-content li:first-child{ margin: 0;}
.list-content h2{ margin: 30px 0 0; font-weight: bold; font-size: 2.7rem;}
.list-content p{ margin: 20px 0 0; min-height: 85px; text-align: left;}
.list-content .center{ text-align: center;}
.list-content a{ padding: 20px 40px 0; min-height: 400px;}
.list-content img{ width: 100%;}

@media screen and (max-width: 768px){
    .list-content{ margin: 0; text-align: left; letter-spacing: normal;}
    .list-content li{ display: block; margin: 30px 0 0; padding: 0 0 30px; width: 100%; border-bottom: 1px solid #eee; font-size: 1.3rem;}
    .list-content li:first-child{ margin: 30px 0 0;}
    .list-content h2{ margin: 15px 0 0; text-align: left; font-size: 1.7rem;}
    .list-content p{ margin: 10px 0 0; min-height: 0;}
    .list-content a{ padding: 0; min-height: 0;}
}

.list{ margin: 30px 0 0 2rem;}
.list li{ list-style: disc; line-height: 1.8;}
.list2 li{ margin: 15px 0 0;}
.list2 li:first-child{ margin: 0;}
.list3{ font-size: 1.7rem;}
.list-d{ margin: 30px 0 0 2rem;}
.list-d li{ list-style: decimal; line-height: 1.8;}
.list-i{ margin: 30px 0 0;}
.list-i li{ padding: 0 0 0 1.5rem; list-style: none; text-indent: -1.5rem; line-height: 1.8;}

@media screen and (max-width: 768px){
    .list{ margin: 0 0 0 1.6rem;}
    h2 + .list{ margin: 30px 0 0 1.6rem;}
    .list li{ margin: 15px 0 0; list-style: disc; line-height: 1.5;}
    .list2 li{ margin: 15px 0 0;}
    .list2 li:first-child{ margin: 0;}
    .list3{ font-size: 1.5rem;}
    .list-d{ margin: 30px 0 0 1.6rem;}
    .list-d li{ margin: 15px 0 0; list-style: decimal; line-height: 1.8;}
    .list-d li:first-child{ margin: 0;}
    .list-i{ margin: 30px 0 0;}
    .list-i li{ padding: 0 0 0 1.3rem; list-style: none; text-indent: -1.3rem; line-height: 1.8;}
}

main{ margin: 0 auto; width: 1090px;}
main:after{ display: block; clear: both; content: "";}
main h2{ text-align: center; font-weight: bold; font-size: 2.3rem; line-height: 1.5;}
main h2 span{
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDI5ZWU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDI5ZWU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjMDA5MGQzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTBkMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: linear-gradient(135deg, rgba(2,158,232,1) 0%,rgba(2,158,232,1) 50%,rgba(0,144,211,1) 51%,rgba(0,144,211,1) 100%);
    color: #fff;
}
main h2 a{ display: inline-block;}

@media screen and (max-width: 768px){
    main{ width: 100%;}
    main h2{ text-align: left; font-size: 1.7rem;}
    main h2 span{ padding: 10px;}
}

/* top
--------------------------------------------------- */
.top .content p{ line-height: 1.8;}
.top .content .table2{ margin: 30px 0 0;}
.top .content .table2-1{ padding: 60px 60px 60px 0;}
.top .content .table2-2{ padding: 60px 0 60px 60px; border-left: 1px solid #eee;}
.top .content .table2 p{ margin: 60px 0 0;}

@media screen and (max-width: 768px){
    .top .content .table2{ margin: 0;}
    .top .content .table2-1{ margin: 30px 0 0; padding: 0 0 30px; border-bottom: 1px solid #eee;}
    .top .content .table2-2{ margin: 30px 0 0; padding: 0; border-left: none;}
    .top .content .table2 p{ margin: 10px 0 0;}
}

/* article common
--------------------------------------------------- */
article{ padding: 60px 0 0;}
article header{ position: relative;}
article header h1{ position: relative; padding: 0 0 15px; border-bottom: 4px solid #efefef; letter-spacing: .1rem; font-weight: bold; font-size: 3rem;}
article header h1.small{ font-size: 2.4rem;}
article header h1:after{ position: absolute; bottom: -4px; left: 0; width: 20%; height: 4px; background: #029ee8; content: "";}
article .content{ margin: 60px 0 0;}
article h2{ text-align: left;}
article h3{ position: relative; padding: 0 0 8px; border-bottom: 4px solid; color: #1d2088; font-weight: bold; font-size: 2.3rem; line-height: 1.5;}
article h3.s1{ color: #e83828;}
article h4{ margin: 45px 0 0; padding: 0 0 0 10px; border-left: 2.1rem solid; color: #1d2088; font-weight: bold; font-size: 2.1rem;}
article h5{ margin: 30px 0 0; font-weight: bold; font-size: 1.7rem;}
article h5.color{ color: #e83828;}
article p{ margin: 30px 0 0; line-height: 1.8;}
article figure{ margin: 30px 0 0;}
article figcaption + img{ margin: 15px 0 0;}
article .fl-left{ margin: 0 30px 0 0;}
article .fl-right{ margin: 0 0 0 30px;}
article section{ padding: 60px 0; border-top: 1px solid #eee;}
article section:first-child{ padding: 0 0 60px; border: none;}
article p + section{ margin: 60px 0 0;}
article .lead + section{ margin: 60px 0 0;}
article section:after{ display: block; clear: both; content: "";}
article .t-right{ text-align: right;}

@media screen and (max-width: 768px){
    article{ padding: 30px 0 0;}
    article header{ padding: 0 20px;}
    article header h1{ font-size: 1.9rem; line-height: 1.5;}
    article .content{ margin: 0; padding: 0 20px 30px;}
    article h3{ padding: 0 0 8px; font-size: 1.7rem;}
    article h4{ margin: 30px 0 0; padding: 0 0 0 10px; border-left: 6px solid; font-size: 1.5rem; line-height: 1.5;}
    article h5{ margin: 30px 0 0; font-size: 1.5rem; line-height: 1.5;}
    article p{ margin: 15px 0 0;}
    article figure{ margin: 30px 0 0;}
    article h2 + figure{ margin: 15px -20px 0;}
    article .fl-left{ margin: 0 20px 0 0;}
    article .fl-right{ margin: 0 0 0 20px;}
    article section{ padding: 30px 0;}
    article section:first-child{ padding: 30px 0;}
    article p a{ word-break: break-all;}
    article p + section{ margin: 30px 0 0;}
    article .lead + section{ margin: 30px 0 0;}
}

.g-ttl{ display: table;}
.g-ttl h2{ display: table-cell; vertical-align: middle;}
.g-ttl p{ display: table-cell; padding: 0 0 0 30px; vertical-align: middle; font-weight: bold; font-size: 2.1rem; line-height: 1.5;}
.g-ttl .single{ font-size: 2.3rem;}
.card{ display: inline-block; margin: 0 8px 0 0; height: 3.5rem; vertical-align: middle; line-height: 1;}

@media screen and (max-width: 768px){
    .g-ttl{ display: block;}
    .g-ttl h2{ display: block;}
    .g-ttl p{ display: block; padding: 0; font-size: 1.5rem;}
    .g-ttl .single{ font-size: 1.7rem;}
}

.box{ margin: 30px 0 0; padding: 30px; background: #efefef;}
.box2{ margin: 30px 0 0; padding: 30px; border: 4px solid #efefef;}
.box h3,
.box2 h3,
.box h4,
.box2 h4{ padding: 0; border: none; background: none; color: #000; text-align: left;}
.box h3:after,
.box2 h3:after{ display: none;}
.box2 p:first-child{ margin: 0;}
.box .list,
.box2 .list{ margin: 0 0 0 2rem;}
.box2 h3 + .list{ margin-top: 15px;}
.box2 figure:first-child{ margin: 0;}
.box .ttl{ padding: 0 0 0 15px; border-left: 4px solid #727171; line-height: 1.8;}
.box h4{ margin: 0; color: #727171;}
.box h4 span{ display: inline-block; margin: 0 0 0 15px; font-size: 1.5rem;}
.box .ttl p{ margin: 0;}
.box table{ margin: 30px 0 0; width: 100%; border: 1px solid #727171;}
.box th{ padding: 15px; border: 1px solid #727171; text-align: center;}
.box td{ padding: 15px; border: 1px solid #727171;}
.box thead th{ background: #8e8d8d; color: #fff;}
.box tbody td{ background: #fff; text-align: right;}
.box strong{ font-size: 100%;}
.box .strong{ padding: 15px; background: #fff; color: #e83828; text-align: center; font-weight: bold; font-size: 1.7rem;}
.box dl,
.box dt{ margin: 0;}

@media screen and (max-width: 768px){
    .box{ padding: 15px;}
    .box2{ padding: 15px;}
    .box .list,
    .box2 .list{ margin: 0 0 0 1.6rem;}
    .box2 .list li:first-child{ margin: 0;}
    .box table{ margin: 0;}
    .box th{ padding: 10px; white-space: nowrap;}
    .box td{ padding: 10px; white-space: nowrap;}
    .box .strong{ padding: 15px; font-size: 1.5rem;}
}

.cap{ margin: 15px 0 0; text-align: right; font-size: 1.3rem;}

@media screen and (max-width: 768px){
    .cap{ text-align: left;}
}

dl{ line-height: 1.8;}
dt{ margin: 30px 0 0; font-weight: bold; font-size: 1.7rem;}
dd{ margin: 15px 0 0;}
dd p{ margin: 15px 0 0;}
dd p:first-child{ margin: 0;}
dd .list{ margin: 15px 0 0 2rem;}
dd .list2{ margin: 15px 0 0;}
dd .list-i{ margin: 15px 0 0;}
dd .box2{ margin: 15px 0 0;}
dd .box2 h3{ font-size: 1.5rem;}
dd .box2 figure{ margin: 15px 0 0;}
dd figure{ margin: 0;}

@media screen and (max-width: 768px){
    dt{ margin: 30px 0 0; font-size: 1.5rem;}
    dd{ margin: 0;}
    dd p{ margin: 10px 0 0;}
    dd p:first-child{ margin: 0;}
    dd a{ word-break: break-all;}
    dd .list{ margin: 15px 0 0 1.6rem;}
    dd .list-i{ margin: 15px 0 0;}
    dd .box2{ margin: 30px 0 0;}
    dd .box2 h3{ font-size: 1.3rem;}
    dd .box2 figure{ margin: 30px 0 0;}
}

td .list{ margin: 0 0 0 2rem;}

@media screen and (max-width: 768px){
    td .list{ margin: 0 0 0 1.6rem;}
    td .list li{ margin: 5px 0 0;}
    td .list li:first-child{ margin: 0;}
}

/* about
--------------------------------------------------- */
.about .row2-1{ width: 25%;}
.about .row2-2{ width: 75%;}
.about .table2-1{ width: 70%;}
.about .table2-2{ padding: 0 0 0 60px; width: 30%;}
.about .table2 p{ margin: 15px 0 0;}
.about .table2 p:first-child{ margin: 0;}
.about address p:first-child{ margin: 0;}
.about .map{ margin: 30px 0 0; height: 300px;}
.about .map iframe{ width: 100%; height: 100%;}
.about figure{ margin: 0;}
.about figure img{ width: 100%;}
.about .list-d{ margin: 0;}
.about .list-d li{ margin: 15px 0 0 2rem;}
.about .list-d li:first-child{ margin: 0 0 0 2rem;}
.about table{ line-height: 1.8;}
.about table th{ padding: 20px 40px 20px 0; vertical-align: top; text-align: left; white-space: nowrap;}
.about table td{ padding: 20px 0;}
.about table span{ display: inline-block; width: 150px;}

@media screen and (max-width: 768px){
    .about .row2-1{ width: 100%;}
    .about .row2-2{ margin: 15px 0 0; width: 100%;}
    .about .table2-1{ width: 100%;}
    .about .table2-2{ padding: 0; width: 100%;}
    .about .table2 p{ margin: 30px 0 0;}
    .about .map{ margin: 30px 0 0; height: 200px;}
    .about table th{ display: block; padding: 15px 0 0; width: 100%;}
    .about table tr:first-child th{ padding: 0;}
    .about table td{ display: block; padding: 0; width: 100%;}
    .about .list-d li{ margin: 10px 0 0 1.6rem; line-height: 1.5;}
}

/* join
--------------------------------------------------- */
.join .table2-1{ padding: 30px 60px 30px 0;}
.join .table2-2{ padding: 30px 0 30px 60px; border-left: 1px solid #eee;}
.join .row2-1{ width: 50%;}
.join .row2-2{ width: 50%;}
.join .box2 p{ margin: 30px 0 0;}

@media screen and (max-width: 768px){
    .join .table2-1{ padding: 0 0 30px;}
    .join .table2-2{ padding: 30px 0 0; border: none; border-top: 1px solid #eee;}
    .join .row2-1{ width: 100%;}
    .join .row2-2{ width: 100%;}
    .join .box{ padding: 0;}
    .join .box2 p{ margin: 10px 0 0;}
}

.join table{ margin: 30px 0 0; width: 100%;}
.join table th{ padding: 15px; border: 2px solid #fff; background: #efefef; text-align: left; white-space: nowrap:}
.join table td{ padding: 15px; border: 2px solid #fff; background: #efefef; text-align: left; white-space: nowrap;}

@media screen and (max-width: 768px){
    .join table{ margin: 30px 0 0; line-height: 1.5;}
    .join table th{ padding: 10px; white-space: nowrap;}
    .join table td{ padding: 10px; white-space: normal;}
}

/* page
--------------------------------------------------- */
.page{ padding: 60px 0 0;}
.page h3{ margin: 45px 0 0;}
.page h3.ttl-mg{ margin: 90px 0 0;}
.page .box h3{ margin: 0;}
.page .list-item li{ margin: 15px 0 0;}
.page figure img{ width: 100%;}
.page .auto img{ width: auto;}
.page h4 + figure{ margin: 15px 0 0;}

@media screen and (max-width: 768px){
    .page{ padding: 15px 0 0;}
    .page h3{ margin: 30px 0 0;}
    .page h3.ttl-mg{ margin: 30px 0 0;}
}

/* service index
--------------------------------------------------- */
.service-detail{ padding: 60px 0 0;}
.service-detail h3{ margin: 45px 0 0;}
.service-detail h3.ttl-mg{ margin: 90px 0 0;}
.service-detail .box h3{ margin: 0;}
.service-detail .list-item li{ margin: 15px 0 0;}
.service-detail figure img{ width: 100%;}
.service-detail .auto img{ width: auto;}
.service-detail h4 + figure{ margin: 15px 0 0;}

@media screen and (max-width: 768px){
    .service-detail{ padding: 15px 0 0;}
    .service-detail h3{ margin: 30px 0 0;}
    .service-detail h3.ttl-mg{ margin: 30px 0 0;}
}

/* etc
--------------------------------------------------- */
.list-check{ margin: 15px 0 0; border-top: 4px solid #efefef; border-right: 4px solid #efefef; border-left: 4px solid #efefef;}
.list-check li{ position: relative; margin: 15px 0 0; padding: 0 15px 15px 45px; border-bottom: 4px solid #efefef; font-weight: bold; font-size: 1.7rem; line-height: 1.5;}
.list-check li:before{ position: absolute; top: 50%; left: 15px; margin: -20px 0 0; width: 18px; height: 18px; border: 1px solid #ccc; background: #fff; content: "";}
.list-check li:after{ position: absolute; top: 50%; left: 15px; display: block; margin: -18px 0 0; width: 18px; height: 9px; border-bottom: 3px solid #e83828; border-left: 3px solid #e83828; content: ''; transform: rotate(-45deg);}

@media screen and (max-width: 768px){
    .list-check{ margin: 10px 0 0; border-top: 2px solid #efefef; border-right: 2px solid #efefef; border-left: 2px solid #efefef;}
    .list-check li{ padding: 0 10px 10px 40px; border-bottom: 2px solid #efefef; font-size: 1.5rem;}
    .list-check li:before{ top: 0; margin: 0;}
    .list-check li:after{ top: 0; margin: 0;}
}

.strong{ position: relative; display: table; margin: 45px 0 0; width: 100%;}
.strong dt{ display: table-cell; margin: 0; width: 80px; background: #e83828; color: #fff; vertical-align: middle;text-align: center; font-weight: bold; font-size: 2.3rem;}
.strong dd{ display: table-cell; margin: 0; padding: 15px; width: calc(100% - 80px); border: 4px solid; color: #e83828; vertical-align: middle; text-align: center; font-weight: bold; font-size: 2.3rem;}

@media screen and (max-width: 768px){
    .strong{ display: block; margin: 30px 0 0; text-align: left;}
    .strong dt{ display: block; padding: 10px 0; width: 100%; font-size: 1.7rem; line-height: 1;}
    .strong dd{ display: block; padding: 20px; width: 100%; border: 4px solid; border-top: none; text-align: left; font-size: 1.7rem; line-height: 1.5;}
}

.table-example{ margin: 30px 0 0; width: 100%; line-height: 1.2;}
.table-example thead th{ padding: 15px 0 0; border-left: 1px dashed #999; text-align: center; font-size: 1.9rem;}
.table-example thead tr th:first-child{ border: none;}
.table-example tbody td{ position: relative; padding: 30px 0 15px; width: 33%; border-left: 1px dashed #999; background: #efefef; vertical-align: middle; text-align: center; font-weight: 700;}
.table-example tbody tr td:first-child{ border: none;}
.table-example tbody tr td:nth-child(2){ background: #ddd;}
.table-example tbody tr td:nth-child(3){ background: #e83828; color: #fff;}
.table-example tbody td:after{ position: absolute; top: 0; left: 0; width: 100%; height: 15px; background: #fff; content: "";}
.table-example tbody td span{ display: inline; padding: 0 3px; color: #e83828;font-size: 2.5rem;}
.table-example tbody tr td:nth-child(3) span{ color: #fff;}

@media screen and (max-width: 768px){
    .table-example{ margin: 0;}
    .table-example thead th{ padding: 10px 0 0; white-space: nowrap; font-size: 1.5rem;}
    .table-example tbody td{ padding: 20px 10px 10px; width: auto; white-space: nowrap;}
    .table-example tbody td:after{ height: 10px;}
    .table-example tbody td span{ padding: 0 2px; font-size: 1.7rem;}
}

.tab{ margin: 30px 0 0; text-align: left; font-size: 0;}
.tab li{ position: relative; display: inline-block; padding: 15px 0; width: 50%; background: #efefef; color: #1d2088; vertical-align: bottom; text-align: center; font-weight: bold; font-size: 2.1rem; line-height: 1; cursor: pointer;}
.tab li:after{ position: absolute; top: 0; right: 0; border-width: 0 10px 10px 0; border-style: solid; border-color: transparent #fff transparent transparent; content: "";}
.tab .select{ background: #1d2088; color: #fff;}
.tab-content{ padding: 30px; border: 4px solid #1d2088;}
.tab-content .lead{ margin: 0; font-weight: bold; font-size: 1.9rem;}
.tab-content .lead + p{ margin: 15px 0 0; font-weight: bold; font-size: 1.9rem;}
.hide{ display: none;}

@media screen and (max-width: 768px){
    .tab li{ font-size: 1.5rem;}
    .tab li:after{ border-width: 0 5px 5px 0;}
    .tab-content{ padding: 20px; border: 2px solid #1d2088;}
    .tab-content .lead{ font-size: 1.5rem;}
    .tab-content .lead + p{ margin: 10px 0 0; font-size: 1.5rem;}
}

.table-v1{ margin: 15px 0 0; width: 100%; border: 1px solid #727171; line-height: 1.5;}
.table-v1 th{ padding: 15px 0; border: 1px solid #727171; background: #efefef; vertical-align: middle; text-align: left; text-align: center; white-space: nowrap; font-weight: bold; font-size: 1.7rem;}
.table-v1 td{ padding: 15px; border: 1px solid #727171; vertical-align: top; text-align: right; white-space: nowrap; font-weight: bold;}
.table-v1 tbody th{ padding: 15px; background: #fff; text-align: right;}
.table-v1 tbody th div{ display: inline-block; width: 50%; text-align: center;}
.table-v1 tbody td{ width: 100px;}
.table-v1 tbody span{ display: inline-block; padding: 0 5px; font-size: 2.5rem;}
.table-v1 + p{ margin: 15px 0 0;}
.table-v1 + .strong{ margin: 30px 0 0;}

@media screen and (max-width: 768px){
    .table-v1{ margin: 0;}
    .table-v1 th{ padding: 10px; font-size: 1.3rem;}
    .table-v1 td{ padding: 10px; vertical-align: baseline;}
    .table-v1 tbody th{ padding: 10px;}
    .table-v1 tbody span{ vertical-align: baseline; font-size: 1.7rem;}
    .wrap-table + p{ margin: 10px 0 0;}
    .wrap-table + .strong{ margin: 30px 0 0;}
}

.strong2{ position: relative; margin: 45px 0 0; padding: 15px; border: 4px solid; color: #e83828; font-size: 2.1rem;}
.strong2 dt{ margin: 0; text-align: center; font-size: 2.3rem;}
.strong2 dd{ text-align: center;}
.strong2 .list{ display: inline-block; margin: 0 0 0 3rem; color: #000;}
.strong2 .list li{ padding: 0; text-align: left;}

@media screen and (max-width: 768px){
    .strong2{ margin: 30px 0 0; font-size: 1.7rem;}
    .strong2 dt{ text-align: left; font-size: 1.7rem; line-height: 1.5;}
    .strong2 dd{ text-align: left;}
    .strong2 .list{ display: inline-block; margin: 0 0 0 2rem; color: #000;}
    .strong2 .list li{ padding: 0; text-align: left;}
}

.table-v2{ margin: 15px 0 0; width: 100%; border: 1px solid #727171; line-height: 1.8;}
.table-v2 th{ padding: 10px 0; width: 20%; border: 1px solid #727171; background: #efefef;}
.table-v2 td{ padding: 10px 0; width: 20%; border: 1px solid #727171; text-align: center;}
.table-v2 + p,
.table-v2 + .list-i{ margin: 15px 0 0;}
article h5.color + .table-v2{ border: 4px solid #e83828;}
table .bg{ background: #ffff9a;}
table .type2 td{ background: #f9c99b;}
.ttl-type1{ display: inline; background: #ffff9a;}
.ttl-type2{ display: inline-block; margin: 0 5px 0 0; width: 4rem; height: 1.5rem; background: #f9c99b;}

@media screen and (max-width: 768px){
    .table-v2{ margin: 0; border: none;}
    .table-v2 th{ padding: 10px; text-align: left; white-space: nowrap;}
    .table-v2 td{ padding: 10px; text-align: left; white-space: nowrap;}
    .table-v2-s thead th{ border: none;}
    .table-v2-s .last th{ border-top: 1px solid #727171;}
    .table-v2-s tr td:first-child{ border-left: none;}
    .table-v2-s tr td:last-child{ border-right: none;}
    .table-v2-s tr:last-child td{ border-bottom: none;}
    .table-v2 + p,
    .table-v2 + .list-i{ margin: 30px 0 0;}
    article h5.color + .table-v2 + .wrap-table{ border: 4px solid #e83828;}
}

.table-v3{ margin: 15px 0 0; width: 100%; border: 1px solid #727171; line-height: 1.8;}
.table-v3 th{ padding: 10px 20px; width: 30%; border: 1px solid #727171; background: #efefef; text-align: left;}
.table-v3 td{ padding: 10px 20px; border: 1px solid #727171; text-align: left;}
article h5.color + .wrap-table .table-v3{ border: 4px solid #e83828;}

@media screen and (max-width: 768px){
    .table-v3{ margin: 0; border: none;}
    .table-v3 th{ padding: 10px; width: auto; white-space: nowrap;}
    .table-v3 td{ padding: 10px; white-space: nowrap;}
    article h5.color + .wrap-table .table-v3{ border: none;}
    article h5.color + .wrap-table{ border: 4px solid #e83828;}
    article h5.color + .wrap-table th{ border-left: none;}
    article h5.color + .wrap-table tr td:last-child{ border-right: none;}
    article h5.color + .wrap-table tr:first-child th{ border-top: none;}
    article h5.color + .wrap-table tr:first-child td{ border-top: none;}
    article h5.color + .wrap-table tr:last-child th{ border-bottom: none;}
    article h5.color + .wrap-table tr:last-child td{ border-bottom: none;}
}

.table-v4{ margin: 30px 0 0; width: 100%; border: 1px solid #727171; font-size: 1.7rem; line-height: 1.5;}
.table-v4 th{ padding: 15px; border: 1px solid #727171; background: #efefef; vertical-align: top; text-align: left; font-weight: bold;}
.table-v4 td{ padding: 15px; border: 1px solid #727171; vertical-align: top; text-align: left;}
.table-v4 thead th{ text-align: center; white-space: nowrap;}
.table-v4 tbody th{ width: 200px;}
.table-v4 thead th:first-child{ width: 200px;}
.table-v4 thead th:nth-child(2){ width: 294px;}
.table-v4 thead th:nth-child(3){ width: 294px;}
.table-v4 figure{ margin: 0; padding: 0 0 15px; width: 50%;}
.table-v4 + p{ margin: 15px 0 0;}
.table-v4 + p strong{ color: #e83828;}
.table-v4 tr th:nth-child(2){ border-top: 4px solid #e83828; border-right: 4px solid #e83828; border-left: 4px solid #e83828;}
.table-v4 tr th + td{ border-right: 4px solid #e83828; border-left: 4px solid #e83828; font-weight: bold;}
.table-v4 tr:last-child th + td{ border-bottom: 4px solid #e83828;}

@media screen and (max-width: 768px){
    .table-v4{ margin: 0; font-size: 1.3rem;}
    .table-v4 th{ padding: 10px; text-align: center;}
    .table-v4 td{ padding: 10px; white-space: nowrap;}
    .table-v4 tbody th{ width: auto;}
    .table-v4 thead th:first-child{ width: auto;}
    .table-v4 thead th:nth-child(2){ width: auto;}
    .table-v4 thead th:nth-child(3){ width: auto;}
    .table-v4 figure{ width: 100px;}
    .table-v4 tr th:nth-child(2){ border-top: 4px solid #e83828; border-right: 4px solid #e83828; border-left: 4px solid #e83828;}
    .table-v4 tr th + td{ border-right: 4px solid #e83828; border-left: 4px solid #e83828; font-weight: bold;}
    .table-v4 tr:last-child th + td{ border-bottom: 4px solid #e83828;}
}

.list-flow li{ position: relative; display: table; margin: 30px 0 0; width: 100%; background: #efefef; list-style: none; font-weight: bold; font-size: 1.8rem;}
.list-flow li:nth-child(2){ background: #dae000;}
.list-flow li:after{ position: absolute; top: -30px; left: 50%; margin: 0 0 0 -20px; border-width: 15px 20px 0 20px; border-style: solid; border-color: #727171 transparent transparent transparent; content: "";}
.list-flow li:first-child:after{ content: none;}
.list-flow strong{ position: absolute; top: 0; right: 0; padding: 15px 60px; background: #e83828; color: #fff;}
.list-flow span{ display: table-cell; width: 50px; background: #727171; color: #fff; vertical-align: middle; text-align: center;}
.list-flow div{ display: table-cell; padding: 15px; width: calc(100% - 50px);}

@media screen and (max-width: 768px){
    .list-flow li{ font-size: 1.5rem; line-height: 1.5;}
    .list-flow strong{ position: relative; top: auto; right: auto; display: block; margin: 10px 0 0; padding: 10px; text-align: center;}
    .list-flow span{ width: 30px;}
    .list-flow div{ width: calc(100% - 30px);}
}

.btn2{ margin: 45px 0 0; text-align: center;}
.btn2 ul{ margin: 0 -15px; text-align: center; font-size: 0;}
.btn2 li{ display: inline-block; padding: 0 15px; width: 50%; font-size: 1.5rem;}
.btn2 a{
    position: relative;
    display: block;
    padding: 15px 0 30px;
    border-radius: 6px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGFlMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZGFlMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjZDBkMzAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2QwZDMwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: linear-gradient(135deg, rgba(218,224,0,1) 0%,rgba(218,224,0,1) 50%,rgba(208,211,0,1) 51%,rgba(208,211,0,1) 100%);
    color: #000;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.9rem;
    line-height: 1.5;
}
.btn2 a:after{ position: absolute; bottom: 10px; left: 50%; margin: 0 0 0 -12px; border-width: 10px 12px 0 12px; border-style: solid; border-color: #fff transparent transparent transparent; content: "";}

@media screen and (max-width: 768px){
    .btn2{ margin: 0; padding: 30px 0 0;}
    .btn2 ul{ margin: 0;}
    .btn2 li{ display: block; margin: 30px 0 0; padding: 0; width: 100%;}
    .btn2 a{ font-size: 1.7rem;}
}

.ttllink{ margin: -60px 0 0; padding: 60px 0 0;}
.ttllink h3{ margin: 0;}

@media screen and (max-width: 768px){
    .ttllink{ margin: -60px 0 0; padding: 60px 0 0;}
}

.list-step{ margin: 0 -15px; text-align: left; font-size: 0;}
.list-step li{ position: relative; display: inline-block; margin: 30px 0 0; padding: 0 15px; width: calc(100% / 5); vertical-align: top; text-align: center; font-size: 1.5rem;}
.list-step .s1{ height: 30px; background: #1d2088; color: #fff; line-height: 30px;}
.list-step .s2{ position: relative; width: 100%; height: 100px; background: #efefef; vertical-align: middle; font-weight: bold; line-height: 90px;}
.list-step .s2s{ display: inline-block; vertical-align: middle; line-height: 1.5;}
.list-step .s2s span{ display: block; color: #e83828; font-weight: normal; font-size: 1.3rem;}
.list-step .s2:after{ position: absolute; top: 50%; right: -15px; margin: -18px 0 0; border-width: 15px 0 15px 15px; border-style: solid;  border-color: transparent transparent transparent #727171; content: "";}
.list-step .s3{ height: 130px; background: #e83828; color: #fff; font-weight: bold; line-height: 130px;}
.list-step p{ margin: 15px 0 0; color: #f00; text-align: left; font-size: 1rem;}

@media screen and (max-width: 768px){
    .list-step{ margin: 0; text-align: left; font-size: 0;}
    .list-step li{ display: block; margin: 30px 0 0; padding: 0; width: 100%; font-size: 1.5rem;}
    .list-step li:first-child{ margin: 15px 0 0;}
    .list-step .s1{ padding: 10px 0; height: auto; line-height: normal;}
    .list-step .s2{ padding: 10px 0; height: auto; line-height: normal;}
    .list-step .s2:after{ top: auto; right: auto; bottom: -15px; left: 50%; margin: 0 0 0 -15px; border-width: 15px 15px 0 15px; border-color: #727171 transparent transparent transparent;}
    .list-step .s3{ padding: 10px 0; height: auto; line-height: normal;}
    .list-step p{ margin: 10px 0 0; color: #f00; text-align: left; font-size: 1rem;}
}

.box-faq{ margin: 30px 0 0; font-size: 1.7rem;}
.box-faq dt{ position: relative; margin: 30px 0 0; padding: 30px 0 0 45px; border-top: 1px solid #eee;}
.box-faq dt:first-child{ padding: 0 0 0 45px; border: none;}
.box-faq dt:before{ position: absolute; top: 30px; left: 0; display: inline-block; width: 30px; height: 30px; border-radius: 100%; background: #029ee8; color: #fff; content: "Q"; text-align: center; font-weight: normal; line-height: 30px;}
.box-faq dt:first-child:before{ top: 0;}
.box-faq dd{ position: relative; margin: 15px 0 0; padding: 0 0 0 45px;}
.box-faq dd:before{ position: absolute; top: 0; left: 0; display: inline-block; width: 30px; height: 30px; border-radius: 100%; background: #8e8d8d; color: #fff; content: "A"; text-align: center; line-height: 30px;}
.box-faq strong{ font-size: 1.5rem;}

@media screen and (max-width: 768px){
    .box-faq{ font-size: 1.5rem;}
    .box-faq dt{ padding: 30px 0 0 45px; border-top: 1px solid #eee; font-size: 1.5rem;}
    .box-faq dt:first-child{ padding: 0 0 0 45px; border: none;}
    .box-faq dt:before{ top: 30px; width: 30px; height: 30px; line-height: 30px;}
    .box-faq dt:first-child:before{ top: -4px;}
    .box-faq dd{ position: relative; margin: 20px 0 0; padding: 0 0 0 45px;}
    .box-faq dd:before{ top: -4px; width: 30px; height: 30px; line-height: 30px;}
    .box-faq strong{ font-size: 1.5rem;}
}

/* purchase index
--------------------------------------------------- */
.list-purchase{ margin: 0 -7px; padding: 15px 0 0; font-size: 0;}
.list-purchase li{ display: inline-block; margin: 15px 0 0; padding: 0 7px; width: 50%; list-style: none; font-size: 1.5rem;}
.list-purchase li a{ position: relative; display: block; padding: 15px 0; border: 4px solid #e0e0e0; background: #efefef; color: #000; text-align: center; text-decoration: none; font-weight: bold; font-size: 1.7rem;}
.list-purchase li a:before{ position: absolute; top: 50%; right: 15px; margin: -7px 0 0; width: 14px; height: 14px; border-radius: 100%; background: #029ee8; content: "";}
.list-purchase li a:after{ position: absolute; top: 50%; right: 19px; margin: -3px 0 0; border-width: 3px 0 3px 5px; border-style: solid; border-color: transparent transparent transparent #fff; content: "";}
.list-purchase li a:hover{ text-decoration: underline;}

@media screen and (max-width: 768px){
    .list-purchase{ margin: 0; padding: 15px 0 0;}
    .list-purchase li{ display: block; margin: 15px 0 0; padding: 0; width: 100%; font-size: 1.5rem;}
    .list-purchase li a{ padding: 15px; border: 4px solid #e0e0e0; text-align: left; font-size: 1.5rem;}
}

.list-purchase2{ margin: 30px 0 0;}
.list-purchase2 li a{ position: relative; display: block; padding: 15px 0 15px 15px; border-bottom: 2px solid #efefef; color: #000; text-decoration: none; font-weight: bold; font-size: 1.7rem;}
.list-purchase2 li:first-child a{ border-top: 2px solid #efefef;}
.list-purchase2 li a:before{ position: absolute; top: 50%; right: 15px; margin: -7px 0 0; width: 14px; height: 14px; border-radius: 100%; background: #029ee8; content: "";}
.list-purchase2 li a:after{ position: absolute; top: 50%; right: 19px; margin: -3px 0 0; border-width: 3px 0 3px 5px; border-style: solid; border-color: transparent transparent transparent #fff; content: "";}
.list-purchase2 li a:hover{ text-decoration: underline;}

@media screen and (max-width: 768px){
    .list-purchase2{ margin: 30px 0 0;}
    .list-purchase2 li a{ padding: 15px 45px 15px 0; font-size: 1.5rem; line-height: 1.5;}
}

/* purchase detail
--------------------------------------------------- */
.service-detail2 figure{ text-align: center;}
.service-detail2 figure img{ max-width: 100%; width: 100%;}
.service-detail2 figure .auto{ width: auto;}
.service-detail2 figure img + img{ margin: 15px 0 0;}
.service-detail2 figure figcaption{overflow: hidden; height: 0; text-indent: 100%; white-space: nowrap;}
.service-detail2 .box2 h3,
.service-detail2 .box2 h4{ margin: 0; color: #1d2088;}

@media screen and (max-width: 768px){
    .service-detail2 h2 + figure{ margin: 30px 0 0;}
    .service-detail2 .fl-left{ float: none; margin: 30px 0 0; width: 100%; font-size: 0;}
    .service-detail2 .fl-left img{ display: inline-block; margin: 0 10px; width: 40%; vertical-align: middle; font-size: 1.3rem;}
    .service-detail2 .fl-right{ float: none; margin: 30px 0 0; width: 100%; font-size: 0;}
    .service-detail2 .fl-right img{ display: inline-block; margin: 0 10px; width: 40%; vertical-align: middle; font-size: 1.3rem;}
    .service-detail2 h3 + dl dt{ margin: 15px 0 0;}
    .service-detail2 .lead{ margin: 0;}
}

.list-flow2{ overflow: hidden; margin: 0 -5px; letter-spacing: -.5rem;}
.list-flow2 li{ display: inline-block; padding: 0 5px; width: calc(100%/4); vertical-align: top; letter-spacing: normal;}
.list-flow2 h4{ padding: 10px 0; border: none; background: #1f2b61; color: #fff; text-align: center; font-size: 1.5rem;}
.list-flow2 dl{ padding: 20px 10px; background: #d5e9f8; text-align: center;}
.list-flow2 dt{ margin: 0; padding: 10px 5px; border: 1px solid #1a489c; background: #fff; color: #1a489c; font-size: 1.3rem;}
.list-flow2 dd{ margin: 10px 0 0; color: #e83828; font-weight: bold;}

@media screen and (max-width: 768px){
    .list-flow2{ margin: 0; letter-spacing: normal;}
    .list-flow2 li{ display: block; padding: 0; width: 100%;}
    .list-flow2 h4{ padding: 10px 0; border: none; background: #1f2b61; color: #fff; text-align: center; font-size: 1.5rem;}
    .list-flow2 dl{ padding: 20px;}
}

.sms figure{ margin: 0;}

.box3{ margin: 30px 0 0; padding: 15px; background: #fadcc2;}
.box3 ul{ overflow: hidden; margin: 0 -15px; letter-spacing: -.5rem;}
.box3 li{ position: relative; display: inline-block; padding: 0 15px; width: calc(100%/3);}
.box3 li:after{ position: absolute; top: 50%; left: -5px; margin: -10px 0 0; border-width: 10px 0 10px 10px; border-style: solid; border-color: transparent transparent transparent #e83828; content: "";}
.box3 li:first-child:after{ display: none;}
.box3 img{ width: 100%;}

@media screen and (max-width: 768px){
    .box3 ul{ margin: 0; letter-spacing: normal;}
    .box3 li{ display: block; margin: 30px 0 0; padding: 0; width: 100%;}
    .box3 li:first-child{ margin: 0;}
    .box3 li:after{ top: -10px; left: 50%; border-width: 8px 6px 0 6px; border-color: #e83828 transparent transparent transparent;}
    .box3 li:first-child:after{ display: none;}
}

.box4{ margin: 60px 0 0; padding: 30px; border: 4px solid #efefef;}
.box4 h3{ margin: 0;}

/* main nav*/
main nav{ float: right; padding: 60px 0 0; width: 240px;}
main nav ul{ background: #e0e0e0;}
main nav li{ border-top: 1px solid #fff;}
main nav li:first-child{ border-top: none;}
main nav a{ position: relative; display: block; padding: 15px 15px 15px 30px; color: #000; text-decoration: none; font-weight: bold; line-height: 1.5;}
main nav a:after{ position: absolute; top: 15px; left: 15px; width: 4px; height: 20px; background: #fff; content: "";}
main nav a:hover{ color: #029ee8;}
main nav ul ul li:first-child{ border-top: 1px solid #fff;}
main nav ul ul a{ padding: 15px; background: #efefef; font-weight: normal; font-size: 1.3rem;}
main nav ul ul a:after{ display: none;}

@media screen and (max-width: 768px){
    main nav{ float: none; padding: 0; width: 100%;}
    main nav ul{ border-bottom: 2px solid #eee; background: #fff;}
    main nav li{ border-top: 2px solid #eee;}
    main nav li:first-child{ border-top: 2px solid #eee;}
    main nav a{ padding: 15px 40px 15px 20px;}
    main nav a:before{ position: absolute; top: 50%; right: 15px; margin: -7px 0 0; width: 14px; height: 14px; border-radius: 100%; background: #029ee8; content: "";}
    main nav a:after{ position: absolute; top: 50%; right: 19px; left: auto; margin: -3px 0 0; width: auto; height: auto; border-width: 3px 0 3px 5px; border-style: solid; border-color: transparent transparent transparent #fff; background: transparent; content: "";}
    main nav a:hover{ color: #029ee8;}
    main nav .current a{ background: #f8f8f8; font-weight: bold;}
    main nav .current a:before{ position: absolute; right: 2px; bottom: 2px; border-width: 0 0 6px 6px; border-style: solid; border-color: transparent transparent #ccc transparent; content: "";}
}

/* contact2 */
.contact2 .content{ margin: 60px auto 0; width: 800px;}
.contact2 .lead{ text-align: center;}
.contact2 h2{ text-align: center; font-size: 1.9rem;}
.contact2 table{ margin: 30px 0 0; width: 100%; border-bottom: 1px solid #efefef; line-height: 1.5}
.contact2 th{ padding: 30px; width: 250px; border-top: 1px solid #efefef; vertical-align: top; text-align: left;}
.contact2 td{ padding: 30px 30px 30px 0; border-top: 1px solid #efefef;}
.contact2 input[type="text"]{ width: 100%;}
.contact2 input[type="text"].short{ width: 30%;}
.contact2 input[type="tel"]{ width: 100%;}
.contact2 input[type="email"]{ width: 100%;}
.contact2 textarea{ padding: 10px; width: 100%; height: 300px;}
.contact2 label{ display: inline-block; margin: 0 30px 0 5px;}
.contact2 td span{ display: block; padding: 0 0 5px;}
.contact2 td div{ padding: 30px 0 0;}
.contact2 td div:first-child{ padding: 0;}
.contact2 td div.mfp_err{ padding: 0;}
.contact2 .submit{ margin: 30px 0 0; text-align: center;}
.contact2 button{ display: inline-block; margin: 0 15px; padding: 20px 0; width: 150px; border: none; border-radius: 3px; background: #1d2088; color: #fff; text-align: center; font-weight: bold; font-size: 1.6rem;}

@media screen and (max-width: 768px){
    .contact2 .content{ margin: 0; padding: 0 15px 30px; width: 100%;}
    .contact2 .lead{ text-align: left;}
    .contact2 table{ margin: 15px 0 0;}
    .contact2 th{ display: block; padding: 30px 0 0; width: 100%;}
    .contact2 td{ display: block; padding: 15px 0 30px; width: 100%; border: none;}
    .contact2 textarea{ height: 100px;}
    .contact2 label{ margin: 0 15px 0 5px;}
    .contact2 td div{ padding: 15px 0 0;}
    .contact2 .submit{ margin: 30px 0 0;}
    .contact2 button{ margin: 0 10px; padding: 15px 0; width: 40%;}
}

/* purchasing
--------------------------------------------------- */
.flex{ display: flex; margin: 0 -30px; flex-wrap: wrap;}
.flex .cont{ padding: 0 30px 30px; width: 50%;}
.flex .cont-inner{ position: relative; display: flex; padding: 20px; width: 100%; height: 100%; background: #efefef; align-items: center; align-content: flex-start; flex-wrap: wrap;}
.flex figure{ margin: 0; padding: 0 10px 0 0; width: 38.2%;}
.flex figure img{ width: 100%; height: auto;}
.flex .detail{ padding: 0 0 0 10px; width: 61.8%;}
.flex h2{ font-size: 2.4rem; line-height: 1.4;}
.flex .exp{ margin: 10px 0 0; font-size: 1.3rem; line-height: 1.5;}
/*.flex .dl{ position: absolute; bottom: 20px; left: 20px; width: calc(100% - 40px);}*/
.flex .dl{ margin: 20px 0 0; width: 100%;}
.flex .dl a{ display: block; padding: 10px 0; background: #029ee8; color: #fff; text-align: center; text-decoration: none; line-height: 1.8;}
.flex .dl i{ display: inline-block; margin: 0 5px 0 0;}
.flex .dl a:hover{ background: #000;}
.flex .dl ul{ display: flex;}
.flex .dl ul > li{ width: 50%;}
.flex .dl ul > li:last-child a{ background: #dbe004; color: #000;}
.flex .dl ul > li:last-child a:hover{ background: #000; color: #fff;}
.flex .bn{ margin: 10px 0 0; width: 100%;}
.flex .bn img{ width: 100%;}

@media screen and (max-width: 768px){
    .flex{ display: block; margin: 0;}
    .flex .cont{ margin: 15px 0 0; padding: 0; width: 100%;}
    .flex .cont-inner{ padding: 15px;}
    .flex figure{ width: 25%;}
    .flex .detail{ padding: 0 0 0 15px; width: 75%;}
    .flex h2{ font-size: 1.8rem;}
    .flex .exp{ font-size: 1.2rem;}
}

/* download
--------------------------------------------------- */
.download .flex{ margin: 0;}
.download table{ margin: 30px 0 0; width: 100%; border: 1px solid #ccc; font-size: 1.3rem; line-height: 1.5;}
.download th{ padding: 15px; border: 1px solid #ccc; vertical-align: middle; text-align: left;}
.download td{ padding: 15px; border: 1px solid #ccc; vertical-align: middle; text-align: left;}
.download thead th{ background: #efefef; text-align: center; white-space: nowrap;}
.download tbody th{ font-size: 1.7rem;}
.download tbody td{ width: 24%;}
.download tbody tr td:nth-child(2){ width: 50%;}
.download tbody tr td:nth-child(3){ width: 10%; text-align: center;}
.download tbody tr td:nth-child(4){ width: 16%; text-align: center;}
.download tbody span{ display: none;}
.download tbody a{ display: block; padding: 10px 0; background: #029ee8; color: #fff; text-decoration: none;}
.download tbody a i{ display: inline-block; margin: 0 5px 0 0;}
.download tbody a:hover{ background: #000;}

@media screen and (max-width: 768px){
    .download table{ margin: 0; border: none; font-size: 1.2rem;}
    .download thead{ display: none;}
    .download th{ display: block; padding: 0; width: 100%; border: none;}
    .download td{ display: block; padding: 0; width: 100%; border: none;}
    .download tbody th{ padding: 15px 0 0; border-top: 1px solid #eee; font-size: 1.6rem;}
    .download tbody td{ width: 100%;}
    .download tbody tr td:nth-child(2){ padding: 10px 0 0; width: 100%;}
    .download tbody tr td:nth-child(3){ padding: 10px 0 0; width: 100%; text-align: left;}
    .download tbody tr td:nth-child(4){ padding: 0 0 15px; width: 100%; text-align: left;}
    .download tbody span{ display: inline-block;}
    .download tbody a{ margin: 0 0 0 auto; width: 50%; text-align: center;}
}

/* privacy
--------------------------------------------------- */
/* privacy */
@media screen and (max-width: 768px){
    .privacy{ padding: 30px 0;}
}

/* --------------------------------------------------
 nav-footer
--------------------------------------------------- */
.nav-footer{ display: none;}
@media screen and (max-width: 768px){
    .nav-footer{ display: block; padding: 22px 20px 0; border-top: 1px solid #eee; background: #efefef;}
    .nav-footer li{ padding: 8px 0 0;}
    .nav-footer li a{ display: block; height: 45px; background: linear-gradient(135deg, rgba(2,158,232,1) 0%,rgba(2,158,232,1) 50%,rgba(0,144,211,1) 51%,rgba(0,144,211,1) 100%); color: #fff; text-align: center; text-decoration: none; font-weight: bold; font-size: 1.5rem; line-height: 45px;}
    .nav-footer li i{ display: inline-block; margin: 0 5px 0 0;}
}

/* --------------------------------------------------
 aside
--------------------------------------------------- */
.aside{ margin: 60px 0 0; padding: 60px 0; background: #efefef; line-height: 1.5;}
.aside h2{ text-align: center;}
.aside h2 span{ font-weight: bold; font-size: 2.7rem;}
.contact{ margin: 40px 0 0;}
.contact li{ padding: 30px; border-right: 2px solid #fff; text-align: center;}
.contact li:first-child{ border-left: 2px solid #fff;}
.contact h3{
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNzI3MTcxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjNzI3MTcxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjNjY2NjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: linear-gradient(135deg, rgba(114,113,113,1) 0%,rgba(114,113,113,1) 50%,rgba(102,102,102,1) 51%,rgba(102,102,102,1) 100%);
    color: #fff;
    font-weight: bold;
    font-size: 2.5rem;
}
.contact p{ margin: 10px 0 0; font-weight: bold; font-size: 1.3rem;}
.aside .contact p{ margin: 10px 0 0; font-weight: bold; font-size: 1.3rem;}
.contact p span{ display: block; letter-spacing: .1rem; font-size: 2.5rem;}
.contact p a{ display: block; padding: 5px 0 0; font-size: 1.9rem;}

.box .contact{ margin: 0;}
.box .contact li{ border: none; border-left: 2px solid #fff;}
.box .contact li:first-child{ border-left: none;}

@media screen and (max-width: 768px){
    .aside{ margin: 0; padding: 15px 20px 0; background: #efefef;}
    .aside .inner{ padding: 0;}
    .aside h2{ display: none;}
    .contact{ margin: 0; border-right: 1px solid #eee; border-bottom: 1px solid #eee;}
    .contact li{ display: table; padding: 0; border: none; border-top: 1px solid #eee; text-align: left;}
    .contact li:first-child{ border: none; border-top: 1px solid #eee;}
    .contact h3{ display: table-cell; padding: 15px 0; width: 20%; vertical-align: middle; text-align: center; font-size: 1.3rem;}
    .contact p{ display: table-cell; margin: 0; padding: 0 0 0 15px; width: 80%; vertical-align: middle; font-size: 1rem;}
    .aside .contact p{ margin: 0; background: rgba(255,255,255,.7); font-size: 1rem;}
    .contact p span{ letter-spacing: normal; font-size: 1.5rem;}
    .contact p a{ display: inline-block; padding: 0; font-size: 1.5rem;}

    .box .contact{ margin: 0;}
    .box .contact li{ border-top: 1px solid #fff; border-left: none;}
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ position: relative; padding: 15px 0; border-top: 2px solid #eee;}
.footer h1{ padding: 0 0 0 20px; width: 220px;}
.footer h1 img{ width: 100%;}
.footer div{ position: absolute; top: 15px; right: 20px; text-align: right; font-size: 1.3rem;}
.footer small{ display: block; margin: 10px 0 0; font-size: 1.1rem;}

@media screen and (max-width: 768px){
    .footer{ padding: 30px 0; border: none; background: #efefef;}
    .footer h1{ display: none;}
    .footer div{ position: relative; top: auto; right: auto; text-align: center;}
    .footer small{ margin: 15px 0 0; text-align: center; line-height: 1.5;}
}