/*
Silver-palette
*/


html{
overflow-x:hidden;
}


body {
font-size: 0.98em;
line-height:1.5em;
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
background: #fff;
color: #444;
overflow-x:hidden;
}

a{color:#185c76;}
a:hover{
text-decoration:none;
color:#31c5bc;
}

a:hover img{
opacity:0.7;
    filter: alpha(opacity=75);
    -ms-filter: "alpha(opacity=75)";
    -khtml-opacity: .75;
    -moz-opacity: .75;
}


li{
list-style:none;
}

hr{
margin:3px;
}

.center{
text-align:center;
margin:0 auto;
}

.right{
text-align:right;

}

.left{
text-align:left;
float:left;
}

.s{
font-size:0.85em;
}


img{
padding:2px;
}


hr{
margin:20px auto;
}


.main_block{
margin-top:0px;
width:75%;
float: right;
}

/* ====================================================
ヘッダー
==================================================== */

.header{
width:100%;
height:100px;
z-index:9999;
position:fixed;
top:0;

}






.navbar {
	position: static!important;
	margin: 0!important
	
}
.navbar .navbar-inner {
  background: #6a91ba;
height:100px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
	box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}
.navbar .brand {
	color: #fff;
	font-weight: bold;
	font-size: 0.8em;
	margin-right: 20px;
	padding: 10px;
position:absolute;
text-shadow:none;
}

.navbar .brand img{
width:230px;
}



.navbar .nav{
float:right;
margin-top:10px;
background:#fff;
}


.navbar .nav li a {

font-weight: bold;
color: #1e7293;
border:1px solid #efefef;
border-radius:3px;
margin:12px 5px 5px 5px;
}




.navbar .nav li a:hover {

	font-weight: bold;
	color: #1e7293;
	border:1px solid #d9f0ec;
border-radius:3px;
margin:12px 5px 5px 5px;
background:#d9f0ec;
}






/* ====================================================
左ブロック
==================================================== */

.side_block{
padding:5px;
width:22%;
float: left;
}

.side_block ul li{
margin-bottom: 0px;
background-color: #fff;
border-bottom:1px solid #cdcdcd;
font-size:0.9em;
padding:15px;
}


.side_block ul li::before {
 content: "\f138";
    font-family: FontAwesome;
    padding-right:5px;
    color:#0077BF;
}



.side_block ul li:hover{

background-color: #e6f0fb;

}


.side_block ul li.now{

background-color: #e6f0fb;

}


.side_block img{
width:100%;
padding:0px;
margin-bottom:5px;
margin-left:0;
text-align:center;
}



.l_menu{

   max-width: 500px;
    margin-bottom: 7px;
    background-color: #e9f3f9;
    border-radius: 5px;
    padding: 1em 1.5em;
    color:#000;
    }
    
   .l_menu:hover{
opacity: 0.8;
} 




.accordion-006 {
    max-width: 500px;
    margin-bottom: 7px;
    background-color: #def0f9;
    border-radius: 5px;
border-bottom:1px solid #999;
}

.accordion-006:hover{
opacity: 0.8;
} 


.accordion-006 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0.6em 1.5em;

    font-weight: 600;
    cursor: pointer;
}

.accordion-006 summary::-webkit-details-marker {
    display: none;
}

.accordion-006 summary::before,
.accordion-006 summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: #999;
    content: '';
}

.accordion-006 summary::before {
    position: absolute;
    right: 1.5em;
    rotate: 90deg;
}

.accordion-006 summary::after {
    transition: rotate .3s;
}

.accordion-006[open] summary::after {
    rotate: 90deg;
}

.accordion-006 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 0.5em 0.5em 0.5em 1.5em;
        background-color: #fff;
    color: #333333;
    transition: transform .5s, opacity .5s;
    border-bottom:1px dotted #cdcdcd;
    font-size:0.9em;
}

.accordion-006 p:hover{
 background-color: #ecf6f7;
}

.accordion-006[open] p {
    transform: none;
    opacity: 1;
}




.paleblue{
background-color: #E1F6FF;
}























h2{
background: url(../images/mark_h2.png) no-repeat 0px 0px ;
border-bottom:1px solid #666;
padding:0px 10px 5px 30px ;
margin-bottom:20px;
color:#2a619a;
font-weight:bold;
display:block;
font-size:1.25em;
line-height:1.25em;
}

h2 span{
font-size:16px;
color:#666;
margin-left:5px;
}

h3{
background:#4b739e;
border-radius:4px;
padding:5px 10px 5px 20px ;
margin-bottom:10px;
color:#fff;
font-weight:bold;
font-size:1.05em;
}


h5{
background:#ebf4f4;
border-radius:4px;
padding:5px 10px 5px 10px ;
margin-bottom:10px;
color:#333;
font-weight:bold;
font-size:1em;
clear:both;
}

h5:before{
 content: "\f0da";
    font-family: FontAwesome;
    padding-right:5px;
}

.w100{
width:100%;
}

.w70{
width:70%;
}

.w50{
width:45%;
}


.mt-5{
margin-top:5px;
}

.mt-20{
margin-top:20px;
}

.mt-50{
margin-top:50px;
}

.mt-70{
margin-top:70px;
}


.mt-80{
margin-top:80px;
}

.mt-100{
margin-top:100px;
}

.ml-10{
margin-left:12px;
}

.mr-10{
margin-right:12px;
}

.pd-5{
padding:5px;
}
 
.pd-10{
padding:10px;
} 

.pd-50{
padding-top:50px;
}


.m-10{
margin:10px;
}

.mb-20{
margin-bottom:20px;
}
.mb-50{
margin-bottom:50px;
}


.red{
color: #F75383;
}

.green{
color: #137D9F;
}






strong{
font-size: 1.15em;
font-weight:bold;
color:#ff5359;
line-height: 140%;
padding: 2px 0;
margin:20px 5px 10px;
display:flex;
}

mark{
 background: linear-gradient(to bottom,transparent 50%, #faffbf 55%);

 }
 
 
.lead{
font-size:1.05em;

}



a:hover, a:focus {
	outline: 0
}
small, .small {
	font-size: 0.8em;
}


.wrapper {
	background: #f7f9fb;
	border-bottom: 1px solid #bbb;
	padding: 30px 0;

}

.wrapper_green {
	background: #e5ecf0;
	padding: 30px 0
}


/* ====================================================
フッター
==================================================== */
.sp-footer{
display:none;
}


footer {
  background-color: #6a91ba;
  padding-top: 9px;
  color: #ffffff;
}

footer .box4 span{
  color: #ffffff;
}


.box_footer{
width:1200px;
display:block;
margin:20px auto;
font-size:0.9em;
line-height:2em;
  color: #ffffff;
}

.box_footer .box3{
  color: #ffffff;
}

.box3{
width:22%;
display:inline-block;
float:left;
  color: #ffffff;
  padding-top:0;
  vertical-align: top;
}

.box_footer .box3 a{
  color: #eff7f7;
}

.box_footer .box3 a:hover{
  color: #40d0ad;
}

.box_footer .box3 a:before{
 content: "\f105";
    font-family: FontAwesome;
    margin-right:5px;
}

.copy{
  color: #fff;
  font-size: 12px;
  padding:20px;
    text-align: center;
    display:table;
    width:100%;
}


footer div.wrap {
	text-align: center;
}

footer small {
	color: #fff;
	font-size: 12px;
}


.back-to-top {
    position: fixed;
    right: 10px;
    bottom: 20px;
    color: #fff;
    width: 40px;
    height: 40px;
    z-index: 9999;
    display: none;
     font-weight:bold;  
}
.back-to-top:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    position: absolute;
    left: 0;
    top: 0;
    background: #50b7bc;

}
.back-to-top:after {
    content: "↑";
    display: block;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 0;
    top: 0;
}



.contact_h3{
  position:relative;
}
.contact_num{
  position:absolute;
  display:block;
  right:1em;
  top:0.5em;
}




/* ====================================================
フォーム
==================================================== */


form {
	margin: 0
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input, label, input, button, select, textarea {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 13px;
	font-family: 'Open Sans', Tahoma, Arial, sans-serif
}
.input-append input, .input-prepend input, .input-append select, .input-prepend select, .input-append .uneditable-input, .input-prepend .uneditable-input {
	-webkit-border-radius: 0 3px 3px 0;
	-moz-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0
}
.input-append input, .input-append select, .input-append .uneditable-input, .input-prepend .add-on:first-child, .input-prepend .btn:first-child {
	-webkit-border-radius: 3px 0 0 3px;
	-moz-border-radius: 3px 0 0 3px;
	border-radius: 3px 0 0 3px
}
.input-append .add-on, .input-prepend .add-on, .input-append .btn, .input-prepend .btn, .input-append .btn-group>.dropdown-toggle, .input-prepend .btn-group>.dropdown-toggle {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0
}
.input-append .add-on:last-child, .input-append .btn:last-child, .input-append .btn-group:last-child>.dropdown-toggle {
	-webkit-border-radius: 0 3px 3px 0;
	-moz-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0
}
.input-transparent {
	border: 0!important;
	background: none!important;
	box-shadow: none!important;
	-moz-box-shadow: none!important;
	-webkit-box-shadow: none!important
}
.radio.inline, .checkbox.inline {
	white-space: nowrap

}



input[type="radio"],input[type="checkbox"]{
  position: relative;
  top: -4px;
margin-right: 10px;
}




.align-center {
	text-align: center
}
.align-right {
	text-align: right!important
}
.clear {
	clear: both
}
.none {
	display: none
}

.form-horizontal .control-group, .form-vertical .control-group {
	margin-bottom: 0
}
.form-horizontal .control-group+.control-group, .form-vertical .control-group+.control-group {
	margin-top: 13px;
	padding-top: 13px;
	border-top: 1px solid #f5f5f5
}
.module-login {
	margin-bottom: 80px;
	margin-top: 80px
}
.module-login .form-vertical input {
	margin-bottom: 0!important
}





.selectBtn{
background:#efefef;
border:1px solid #cdcdcd;
padding:5px 15px;
margin: 15px auto;
display:block;
color:#333;
}

.selectBtn:hover{
opacity: 0.8;
}




.box1{
width:88%;
margin:3% auto;

}

.box2{
width:48%;
margin:1%;
float:left;
}

.box3{
width:31%;
margin:1%;
display:inline;
float:left;

}






.cat_wt{
background-color: #fff;
border:1px solid #cdcdcd;
padding:3px 15px;
border-radius:3px;
display:inline-table;
margin:5px;
font-size:0.75em;
}


.cat_gray{
background-color: #efefef;
border:1px solid #cdcdcd;
padding:3px 15px;
border-radius:3px;
display:inline-table;
margin:5px;
font-size:0.75em;
}


.cat_blue{
border:1px solid #cdcdcd;
padding:3px 15px;
border-radius:3px;
display:inline-table;
margin:5px;
font-size:0.75em;
background-color: #E1F6FF;
}

.cat_green{
border:1px solid #cdcdcd;
padding:3px 15px;
border-radius:3px;
display:inline-table;
margin:5px;
font-size:0.75em;
background-color: #ebfff0;
}


.cat_pink{
border:1px solid #cdcdcd;
padding:3px 15px;
border-radius:3px;
display:inline-table;
margin:5px;
font-size:0.75em;
background-color: #fff0ec;
}

.cat_yellow{
border:1px solid #cdcdcd;
padding:3px 15px;
border-radius:3px;
display:inline-table;
margin:5px;
font-size:0.75em;
background-color: #ffffe7;
}





.box_list01{
width:95%;
border:2px solid #74b5c3;
text-align:left;
background-color: #fff;
border-radius: 4px;
text-decoration: none!important;
padding: 10px 20px 20px 20px;
margin-top:20px;
margin-bottom:20px;
color:#666666;
display: block;
position: relative;
 z-index: 9996;
 min-height:200px;
}












.box_list01:hover{
background-color: #f1fdfb;
}

.box_list01 img{
width:200px;
height:150px;
float:left;
margin:0px 15px;
border:1px solid #cdcdcd;
padding:5px;
box-shadow: 2px 2px 4px #cdcdcd;
object-fit: cover; /* この一行を追加するだけ！ */
}

.box_list01 h4{
color:#3e7182;
font-weight:bold;
margin-top:5px;
font-size:0.85em;
}


.box_check{
font-weight: bold;
background-color: #fdfcea;
    position: absolute;
    top: -10px;/* トップからの設置位置 */
    right:0px;/* 右端からの設置位置 */
 z-index: 9997;

    border: 2px solid #74b5c3;
text-align:center;
    border-radius: 25px;
    cursor: pointer;
    -webkit-box-shadow: 0 0 7px rgb(0 0 0 / 20%);
    box-shadow: 0 0 7px rgb(0 0 0 / 20%);
width:35px;
height:35px;
display: table;
margin-left:95%;
}

.box_check form{
margin-left:8px;
}


.listCtrl{
width:100%;
margin:10px 0px;

}

.listCtrl a{
float:left;
margin-left:5px;
}

.listCtrl label{
float:left;
margin-left:15px;

}

.listCtrl label p{
margin-top:-15px;
margin-left:30px;
}

div.conditions {
	min-height: 40px;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	align-items: center;
	-ms-flex-align: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	background-color: #fff;
	border-radius:3px;
	border:1px solid #efefef;
}


.listCtrl .faq{
	font-size: 20px;
	padding-top:5px;
}

div.conditions div.list {
	padding: 7px 10px;
	margin: 0 10px 0 0;
	color: #595757;
	flex: 1;
	-ms-flex: 1;
	-webkit-box-flex: 1;
	-webkit-flex: 1;
}

div.conditions div.list span.title {
	display: table-cell;

	vertical-align: middle;
}

div.conditions div.list ul {
	display: table-cell;
	margin: 0 0 0 5px;
}

div.conditions div.list ul li {
	display: inline-block;
	margin: 3px 10px 3px 0;
	position: relative;
	bottom: -1px;
}


.listCtrl a:hover {
	opacity: 0.8;
}

div.conditions div.list span.type {
	display: inline-block;
	background-color: #707f87;
	color: #fff;
	padding: 4px 5px;
}



div.conditions div.list a.keyword:hover {
	text-decoration: line-through;
}

div.conditions div.list a.keyword::after {
	content: "\00d7";
	font-weight: normal;
	margin-left: 3px;
	font-size: 18px;
	position: relative;
	bottom: 3px;
	display: inline-block;
	vertical-align: middle;
}

div.conditions ul.condiChange {
	width: 220px;
}

div.conditions ul.condiChange li {
	float: left;
	margin-right: 10px;
	height: 40px;
	line-height: 40px;
}


div.conditions.seminar {
	margin-bottom: 10px;
}

div.conditions ul.condiChange {
	float: right;
	width: auto;
}


a.addList {
	font-size: 12px;
	padding: 6px 15px 7px 15px;
	background-color: #7cbecb;
	color: #fff;
	border-radius:20px;

}



a.requestList {
	font-size: 12px;
	padding: 6px 15px 7px 15px;
	background-color: #ee844a;
	color: #fff;
	border-radius:20px;

}

input.ckbox {
	display: none;
}

span.ckboxParts {

	padding-left: 20px;
	position: relative;
	margin-right: 8px;
}

span.ckboxParts::before {
	content: "";
	display: block;
	position: absolute;
	top: 5px;
	left: 0;
	width: 15px;
	height: 15px;
	background-color: #fff;
	border: 2px solid #ff813d;
	border-radius: 4px;
	box-shadow: 1px 1px 1px #b3b3b3;
	cursor: pointer;
}

input.ckbox:checked + span.ckboxParts::after {
	content: "";
	display: block;
	position: absolute;
	top: -1px;
	left: 5px;
	width: 7px;
	height: 14px;
	transform: rotate(40deg);
	border-bottom: 5px solid #ba3e3d;
	border-right: 5px solid #ba3e3d;
}

.ckboxParts span {
	display: none;
}


.check_text{
margin-right:5px;
float:left;
padding-top:7px;
}

/* ====================================================
詳細ページ
==================================================== */

.waku{
border:2px solid #74b5c3;
border-radius:5px;

background: #fff;

margin-bottom:40px;
width:auto;
display:block;
padding:30px 30px 30px 30px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: relative;
display:table;
}



.waku::before {
    content: "";
    top: 0;
    right: 0;
    border-bottom: 6em solid transparent;
    border-right: 6em solid #74b5c3; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 100;
}
.waku::after {
    content: "\f00c";
        font-family: FontAwesome;
    display: block;
    top: 20px;
    transform: rotate(0deg);
    color: #fff; /* 文字色はここで変更 */
    right: 13px;
    position: absolute;
    z-index: 101;
    font-size:1.5em;
}




.waku h1{
font-size:1.6em;
font-weight:bold;
color:#000;
margin-left:10px;
}

.waku h1 span{
font-size:0.5em;
}

.waku2{
border:2px solid #74b5c3;
border-radius:5px;

background: #fff;

margin-bottom:40px;
display:table;
padding:30px 30px 30px 30px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}


.point {
	margin: 15px 0;
	line-height: 160%;

	border-radius: 30px;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	-webkit-align-items: center;
	align-items: center;
	width: 100%;
}

.point img {
	margin: -5px 5px -5px 10px;
}
.point p {
	font-size: 1.15em;
font-weight:bold;
color:#ff5359;
	line-height: 140%;
	padding: 2px 0;
	width: 85%;
	margin: 1px 0;
}





.image01{
float:left;
margin:0px 25px 20px 20px;
border:1px solid #cdcdcd;
box-shadow: 2px 2px 4px #cdcdcd;
display:block;

margin-bottom:50px;
background:#fff;
}

.image01 img{
object-position: 50% 50%;/* デフォルト値。center centerと同じ */

object-fit: contain;
width:320px;
min-height:250px;
}

.image02{

margin:0px 25px 20px 20px;
border:1px solid #efefef;

display:table;

margin-bottom:20px;
background:#fff;
}

.image02 img{
object-position: 50% 50%;/* デフォルト値。center centerと同じ */

object-fit: contain;
width:320px;
height:auto;
}


.mainList_caution{
display:block;
float:none;
overflow: hidden;

}

.tab01 {
  width: 100%;
  margin-left:0px;
}
/*タブのスタイル*/
.tab_menu {
  /* width: 13%; */
  padding:10px 15px;
  font-size: 0.9em;
  text-align: center;
  color: #999;
  border-top: 1px solid #cdcdcd;
   border-left:1px solid #cdcdcd;
  background-color: #f9f9f9;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  margin:1px;
}



.tab_menu:last-child {
   border-right:1px solid #cdcdcd;
}


.tab_menu:hover {
  background-color: #0077BF;
  color: #fff;
  opacity: 0.75;


}


.tab_contents {
border-bottom:2px solid #2baca4;
border-left:2px solid #2baca4;
border-right:2px solid #2baca4;
border-top:2px solid #2baca4;
padding:40px 30px;
clear: both;
overflow: hidden;
transition: .5s opacity;
width:90%;
background-color: #fff;
margin:0 auto;
margin-left:30px;
border-radius:5px;
}

.tab_contents .lead{
font-size:1.5em;
}


.active {
  background-color: #0077BF;
  color: #fff;
}



h4.dark {
	background-color: #3e7182;
	padding: 10px 10px 6px 10px;
	color: #fff;
border-radius:10px;
	margin-bottom: 10px;
	font-size: 1em;
	position: relative;
}

h4.dark::before {
	content: url("../images/mark_h2wt.png");
	display: inline-block;
	vertical-align: middle;
	margin-right: 7px;
	position: relative;
	top: -1px;
}


.tab_contents h6{
font-size:1.0em;

color:#3e7182;
font-weight:bold;
}

.tab_contents h6:before{
 content: "\f105";
    font-family: FontAwesome;
    margin-right:5px;
}

.tab_contents .bg_green{
background-color: #edf6f6;
	padding: 15px;
	line-height: 160%;
	margin: 0 0 30px 0;
	border-radius: 5px;
}





/* ====================================================
マイページ
==================================================== */


.card{
display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  align-items: flex-start;
}



.box_list03{
width:auto;
border:2px solid #74b5c3;
text-align:center;
background-color: #fff;
border-radius: 4px;
padding: 10px;
margin:8px 8px;
float:left;
height:250px;
 display:flex;
flex-flow: column;

}



.box_list03 img{
width:98%;
height:150px;
float:left;
margin:10px auto;
border:1px solid #cdcdcd;
box-shadow: 2px 2px 4px #cdcdcd;
object-fit: cover; /* この一行を追加するだけ！ */


}

.box_list03 h4{
font-size:14px;
font-weight:bold;

}












.side_block ul {
	text-align: left;
	margin-left:0;
	padding: 1%;
	clear:both;
}



.side_block li {

	color: #595757;
	display: block;
	margin-left:0;
}



.koumoku{
background:#edf6f6;
padding:5px;
margin-bottom:10px;
font-weight:bold;
}

/* ====================================================
資料請求・お問い合わせ
==================================================== */


.btnRed {
	display: inline-block;

	padding: 15px 15px;
	background-color: #f48a00;
	color: #fff !important;
	font-weight: bold;
	font-size: 16px;
	border:2px solid #f48a00;
	border-radius: 5px;
	box-shadow: 0 1px 0 #b3b3b3;
	text-align: center;
	margin: 5px auto;
	cursor: pointer;
	user-select: none;
}

.btnRed:hover{
background-color: #e28000;
border:2px solid #e28000;
}


.btngreen {
	display: inline-block;

	padding: 15px 15px;
	background-color: #7cbecb;
	color: #fff !important;
	font-weight: bold;
	font-size: 16px;
	border:2px solid #7cbecb;
	border-radius: 5px;
	box-shadow: 0 1px 0 #b3b3b3;
	text-align: center;
	margin: 5px auto;
	cursor: pointer;
	user-select: none;
}

.btngreen:hover{
background-color: #689faa;
border:2px solid #689faa;
}





.single_block{
margin:10px auto;
margin-bottom:40px;
width:80%;
display:table;

background:#ffff;
padding:30px 50px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}






table {
	border-collapse: collapse;
	border-spacing: 0;
}

.view_display{
        display:none !important;
 }
 
 table.main{
 width:100%;
font-size:0.9em;
 display:table;
margin:0px auto;
}
    
    
    
table.main th {
  background: #EDF6F9;
  border:1px solid #cdcdcd;
  padding: 10px;
  font-size:0.95em;

}

table.main th.th_blue{
background:#4b739e;
color:#fff;
text-align:left;
font-size:1.05em;
}





table.main td {
  border:1px solid #cdcdcd;
  padding: 10px;
  background:#fff;
}
    
table.main td.tit_shozai{
padding-top:10px;
border-top:5px solid #0077BF;
font-weight:bold;
font-size:1.1em;
}

.bt_detail{
background: #fff;
color:#000;
float:right;
padding:5px 15px;

border-radius:5px;
border-bottom:1px solid #999;
border-right:1px solid #999;
margin:0;
}


    
   @media screen and (max-width: 640px) {
  .last td:last-child {
    border-bottom: solid 1px #cdcdcd;

  }
table.main {
    width: 100%;
  }
  
  table.main th {
border-bottom: none;


  }
  
  

table.main td {
border-bottom: none;
background:#fff;

  }
  
  
 .dp_block{
display:block;

}       
} 
    
    




form.formStd table.main td#note {
	word-wrap: break-word;
}

form.formStd table.main td div.horizontal {
	float: left;
}

form.formStd table.main td input[type="text"], div.inputArea input[type="text"], div.inputArea input[type="email"], div.inputArea input[type="password"], form.formStd table.main td input[type="password"], form.formStd table.main td input[type="email"], form.formStd table.main td input[type="date"], form.formStd table.main td input[type="tel"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 7px 30px 7px 10px;
	height: 26px;

	border: 1px #ccc solid;
	border-radius: 3px;
	padding: 2px 5px;
	color: #595757;
	box-shadow: none;
}

form.formStd table.main td input::-placeholder {
	font-size: 14px;
}

form.formStd table.main td input::-webkit-input-placeholder {
	font-size: 14px;
}

form.formStd table.main td input::-ms-input-placeholder {
	font-size: 14px;
}

form.formStd table.main td input:-moz-placeholder {
	font-size: 14px;
}

form.formStd table.main td input[name="family-name"], form.formStd table.main td input[name="given-name"], form.formStd table.main td input[name="family-name-kana"], form.formStd table.main td input[name="given-name-kana"] {
	width: 180px;
}

form.formStd table.main td span.nameTitle {
	margin-right: 15px;
	margin-left: 10px;
}

form.formStd table.main td span.nameTitleKana {
	margin-left: 10px;
}

form.formStd table.main td input[name="bday"] {
	margin: 7px 10px;
}

form.formStd table.main td input[name="postal-code"], form.formStd table.main td input[name="tel"] {

}

form.formStd table.main td input[name="company"], form.formStd table.main td input[name="email"], form.formStd table.main td input[name="pass"], form.formStd table.main td input[name="address"] {
	width: 100px;
}

form.formStd table.main td input[name="password"], form.formStd table.main td input[name="address-level2"], form.formStd table.main td input[name="address-line2"] {
	width: 80%;
}

form.formStd table.main td input[name="city"], form.formStd table.main td input[name="cityNo"], form.formStd table.main td input[name="buildingName"] {
	width: 80%;
}

form.formStd table.main td input[name="postal-code"] + a {
	text-decoration: none;
	font-size: 12px;

}

form.formStd table.main td input[name="postal-code"] + a::before {
	content: url("../images/icon_zip.png");
	display: inline-block;
	vertical-align: middle;
	position: relative;
	bottom: -1px;
	margin-right: 5px;

}

form.formStd table.main td input[name="organization"] {
	display: block;
	width: 80%;
}

form.formStd table.main td label {
	color: #595757;
	margin: 7px 5px;
	display: inline-block;
}

form.formStd table.main td a.textLink {
	display: block;
	margin: 7px 0 7px 10px;
}




.btnArea{
margin:0 auto;
text-align:center;
}



#form1{
  display: flex;
  justify-content: right; 	
  height:30px;
  margin-bottom:15px;
}
/*入力フォーム*/
#sbox1{
  height:30px;
  width:50%;
  padding:0 15px;
  border-radius:4px 0 0 4px;
  background:#eee;
  border:none;
  outline:0;
}
/*検索ボタン*/
#sbtn2{
  width:30px;
  border-radius:0 4px 4px 0;
  background:#79bfc4;
  border:none;
  color:#fff;
  font-size:18px;
  cursor: pointer;
  position:relative;
}


#sbtn2 img{
  width:28px;
   height:28px;
position:absolute;
top:0;
left:0;
}


#sbtn2:hover{
background: #92dbff;/
}

/* ====================================================
トップページ
==================================================== */


.video-wrapper {
  position: relative;
  height: 70vh;
  width: 100%;
margin-top:90px;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  position: relative;
    min-height:500px;
}



.video-wrapper::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70vh;
  background-color:#2d6e84;
opacity: 0.7;
  background-size: 4px 4px;
  background-position: 0;
      min-height:500px;
}


.catch-copy {
  position: absolute;
  top: 50px;
  bottom: 0;
  left: 0;
  width: 100%;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  text-align: center;
font-size:24px;
  color: #fff;
  margin: auto;
  z-index:333;
  line-height:2em;
  display:block;
}

.video-wrapper form{

margin:50px auto;
display:block;

}

.search_container{
margin:20x auto;
display:block; 

 background: #fff;
  
  box-sizing: border-box;
  position: relative;
  border: 1px solid #999;
  padding: 3px 10px;
  border-radius: 25px;
  height:2.3em;
  width: 90%;
  max-width:600px;
  overflow: hidden;
}
.search_container input[type="text"]{
  border: none;
  height: 2em;
  width: 90%;
    font-size: 0.8em;
}
.search_container input[type="text"]:focus {
outline: none!important;
-moz-outline-style: none;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  font-size: 1.2em;
  border: none;
  background: none;
  color: #3879D9;
  position: absolute;
  width: 2.5em;
  height: 2.5em;
  right: 0;
  top: -10px;
  outline : none;
}




.img_wrap{


}
.img_wrap img a{

  cursor: pointer;
  transition-duration: 0.3s;
}
.img_wrap img a:hover{
opacity: 0; 
    filter: alpha(opacity=100);
    -ms-filter: "alpha(opacity=100)";
    -khtml-opacity: .100;
    -moz-opacity: .100;
  filter: brightness(70%);
}







.box_border{
border:2px solid #74b5c3;
border-radius:5px;
background: #fff;
margin-top:40px;
margin-bottom:40px;
width:95%;
padding:30px 30px;


}




.box_border li{
border-bottom:1px dotted #cdcdcd;
padding:5px 5px 5px 5px;
}



.bg_green{

background:#f6f9f8;
}


.special ul{
display:table;
}

.special li{
width:43%;
float:left;
}




.moreNewItem {
 display:table;

  margin: 15px auto;
  font-size: 16px;
 border:1px solid #2baca4;
border-radius:30px; 
text-align:center;
padding:10px 100px;
position:relative;
}

.moreNewItem:hover {
 display:table;
color:#fff;
  margin: 15px auto;
  font-size: 16px;
 border:1px solid #2baca4;
border-radius:30px; 
text-align:center;
padding:10px 100px;
background:#2baca4;
}

.moreNewItem::after {
 content: "\f105";
    font-family: FontAwesome;
width:15px;
  position:absolute;
  right:15px;
  font-weight:normal;
}

#link01 ,#link02 ,#link03 ,#link04 ,#tab_link{
padding-top:130px;
margin-top:-130px;
}




.buttons {
    margin: 10%;
    text-align: center;
}

.btn-hover {
    width: 300px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 20px 0px;
    height: 55px;
    text-align:center;
    border: none;
    background-size: 300% 100%;

    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:focus {
    outline: none;
}



.btn-hover.color-4 {
    background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
    box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.1);
}


.word-counter span br{
  /* display:none; */
}

/* ====================================================
クライアント管理画面
==================================================== */
.box_user{

display:inline;
float:right;
margin:30px;
font-size:0.9em;
border:1px solid  #efefef;
border-radius:5px;
padding:10px;
background:#fff;
}

.s_date01{
width:100px;
margin-top:8px;
display:inline;
}

h1{
font-size:2em;
margin-bottom:15px;

}




/* トップメニュー-------------------------*/

.bdr02{


  padding: 20px 15px;
  border: solid 1px #fff;
  position: relative;
border-radius:7px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
background:#fff;
margin:5px;
width:90%;

display: flex;
justify-content: left;  

}

.bdr02:before{
  content: "";
  border: solid 2px #c6ddf7;
  position: absolute;
  top: 4px;
  left:4px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius:7px;
}

.bdr02:hover{
transition: all 0.5s;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}


.bdr02:hover:before{
  content: "";
  border: solid 2px #7eb7f7;
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border-radius:7px;

}


.bdr02 img{
width:45px;
align-self: center; 
}


.bdr02 h3{
color:#115DC7;
background:none;
font-size:0.9em;
font-weight:bold;
line-height:1.5em;

 margin-left:-5px;
}








.counter{
font-size:0.9em;
}


.pagination-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
    list-style-type: none;
    padding: 0;
    margin-top:10px;
}

.pagination-2 a {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    border-radius: 1px;
    background-color: #f2f2f2;
    color: #2589d0;
}

.pagination-2 a:not(:hover) {
    text-decoration: none;
}

.pagination-2 .current a {
    background-color: #2589d0;
    color: #fff;
    pointer-events: none;
}




.list_thum{
width:160px;
margin:1px auto;
display:block;
}



.th_blue{
background:#4b739e;

}

.status_red{
border:2px solid #e85000;
color:#e85000;
padding:3px 5px 3px 5px;
margin:5px;
display:inline-block;
}


.status_gray{
border:2px solid #999;
color:#999;
padding:3px 5px 3px 5px;
margin:5px;
display:inline-block;
}



button{
white-space: nowrap;
}

label{
display:inline;
float:left;
margin-right:15px;
}

.form-group{
display:table;

width:100%;
margin-bottom:20px;
}


.form-control{
width:95%;
display:flex;
line-height:1.75em;

}


.form-small{
width:70px;
display:flex;
line-height:1.75em;

}

.form-midium{
width:120px;
display:flex;
line-height:1.75em;

}


#co_employee_num_on_year{
margin-top:5px;
width:100px;
}

#co_employee_num_on_month{
width:60px;
}


.error-message{
color:#e85000;
}


input[type="text"]{
margin-bottom:5px;
margin-right:5px;
}

input[type="email"]{
margin-bottom:5px;
margin-right:5px;
}

.cc-wrapper{
margin-bottom:5px;
}






@media(max-width:767px){
body{padding:0!important}

.wrapper{padding:20px 15px}


.navbar .brand {
	color: #fff;
	font-weight: bold;
	font-size: 0.6em;
	margin-right: 20px;
height:70px;
}


.nav-collapse{
padding-top:0px;
width:100%;
left:-5px;
position:absolute;
top:100px;
}

.navbar .nav{
float:none;
margin-top:40px;
padding-bottom:20px;
border-bottom:1px solid #666;
}


.menu_green{
width:100%;
display:table;

}

.menu_pink{
width:100%;
display:table;

}

.menu_green li{
float:left;
padding:7px;
list-style:none;
border-right:1px solid #50b7bc;
border-top:1px solid #50b7bc;
border-bottom:1px solid #50b7bc;
margin:0;
margin-top:12px;
width:auto;
}





.menu_pink li{
float:left;
padding:7px;
list-style:none;
border-right:1px solid #eb9fb5;
border-top:1px solid #eb9fb5;
border-bottom:1px solid #eb9fb5;
margin:0;
margin-top:12px;
width:auto;
}

.bg_pink{
background:#eb9fb5;
color:#fff;
}





.wr_block{
display: flex;
flex-direction: row-reverse;
width:100%;
}

.main_block{
min-width:90%;
padding:0%;
width:100%;
display:block;
margin:10px auto;
}

.side_block{
display:block;
padding:5px;
width:100%;
}



.box_list01{
width:86%;
border:2px solid #74b5c3;
text-align:left;
background-color: #fff;
border-radius: 4px;
text-decoration: none!important;
padding: 10px 20px;
margin-top:20px;
margin-bottom:20px;
color:#666666;
display: block;
position: relative;
 z-index: 9996;
}


.card{
display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  align-items: flex-start;
}

.box_list03{
width:auto;
border:2px solid #74b5c3;
 display: flex;
background-color: #fff;
border-radius: 4px;
padding:8px;
margin:8px 5px;

}

.box_check{
font-weight: bold;
background-color: #fdfcea;
    position: absolute;
    top: -10px;/* トップからの設置位置 */
    right:0px;/* 右端からの設置位置 */
 z-index: 9997;

    border: 2px solid #74b5c3;
text-align:center;
    border-radius: 25px;
    cursor: pointer;
    -webkit-box-shadow: 0 0 7px rgb(0 0 0 / 20%);
    box-shadow: 0 0 7px rgb(0 0 0 / 20%);
width:35px;
height:35px;
display: table;
margin-left:90%;
}


.dispNum{
display: table;
width:100%;
}

.box_footer{
width:100%;
display:block;
margin:20px auto;
font-size:0.9em;
line-height:2em;
  color: #ffffff;
}


    
    
.single_block{
margin:10px auto;
width:90%;
display:table;

background:#ffff;
padding:10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


.box3{
width:97%;
margin:1%;
display:block;
float:none;
padding:2%;
}

.special ul{
display: table;
height:100%;
}

.special li{
width:90%;
float:none;
}

.video-wrapper {
  position: relative;
  height: 90vh;
  width: 100%;
margin-top:110px;

}

.video-wrapper::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90vh;
  background-color:#2d6e84;
opacity: 0.7;
  background-size: 4px 4px;
  background-position: 0;
      min-height:500px;
}



.catch_img{
width:90%;
margin-top:0px;
}

.catch-copy img{
padding:5px;
}
.catch-copy p{
font-size:0.8em;
line-height:1.5em;
width:80%;
margin :0 auto;
}




.box4{
width:48%;
display:inline-block;
float:left;
  color: #ffffff;
  padding-top:0;
  vertical-align: top;
}

.box2{
width:98%;
margin:1%;
float:left;
}

.box1{
width:95%;
margin:3% auto;
}

.image01{
width:320px;
min-height:250px;
float:none;
margin:0px auto;
border:1px solid #cdcdcd;
padding:0px;
box-shadow: 2px 2px 4px #cdcdcd;
object-fit: contain; /* この一行を追加するだけ！ */
margin-bottom:20px;
background:#fff;
}

.mainList_caution{
display:block;
float:none;
overflow:hidden;
text-align:center;
}


.waku::before {
    content: "";
    top: 0;
    right: 0;
    border-bottom: 2em solid transparent;
    border-right: 2em solid #74b5c3; /* ラベルの色はここで変更 */
    position: absolute;
    z-index: 100;
}
.waku::after {
    content: "";
        font-family: FontAwesome;
    display: block;
    top: 20px;
    transform: rotate(0deg);
    color: #fff; /* 文字色はここで変更 */
    right: 13px;
    position: absolute;
    z-index: 101;
    font-size:1.5em;
}

.waku h1{
font-size:1.4em;
font-weight:bold;
color:#000;
margin-left:10px;
}

.waku h1 span{
font-size:0.8em;
}

.waku{
border:2px solid #74b5c3;
border-radius:5px;

background: #fff;
background-size:contain;

margin:10px auto;
margin-bottom:40px;
width:85%;
display:table;

padding:10px 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: relative;
}





.tab01 {
  width: 100%;
  margin-left:0px;
}
/*タブのスタイル*/
.tab_menu {
  width: auto;
  padding:5px;
  font-size: 0.8em;
  text-align: center;
  color: #999;
  border-top: 1px solid #cdcdcd;
   border-left:1px solid #cdcdcd;
  background-color: #f9f9f9;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  margin:1px;
}

.tab_contents {
border-bottom:2px solid #2baca4;
border-left:2px solid #2baca4;
border-right:2px solid #2baca4;
border-top:1px solid #2baca4;
padding:40px 20px;
clear: both;
overflow: hidden;
transition: .5s opacity;
width:85%;
background-color: #fff;
margin:0 auto;
}

.active {
  background-color: #0077BF;
  color: #fff;
}

.box_list01 img{
width:80%;
min-height:200px;
float:none;
margin:10px auto;
border:1px solid #cdcdcd;
padding:5px;
box-shadow: 2px 2px 4px #cdcdcd;
object-fit: cover; /* この一行を追加するだけ！ */
display:block;
margin-bottom:15px;
}

/*入力フォーム*/
#sbox1{
  height:30px;
  width:100%;
  padding:0 15px;
  border-radius:4px 0 0 4px;
  background:#eee;
  border:none;
  outline:0;

}

#sbtn2 img{
  width:28px;
   height:28px;
position:absolute;
top:0;
left:2px;
}


.box_border{
border:2px solid #74b5c3;
border-radius:5px;
background: #fff;
margin-top:40px;
margin-bottom:10px;
width:85%;
padding:30px 30px;


}


.tel_header{
font-size:2em;
border:4px solid #fff;
}



.lp_top{
width:100%;
display:block;
margin:0 auto;
}


.lp_top img{
float:left;
display:inline;
}

.lp_left{
width:100%;
float:none;
display:block;
margin:0;
padding:15px;
text-align:center;
}

.lp_right{
width:100%;
float:none;
display:block;
margin:0;
padding:0;
text-align:center;
}


.lp_tit {
  position: relative;
  display: block;
  margin: 1em 1em 2em 1em;
  text-align:center;
  font-size:1.5em;
  padding-bottom:10px;
}
.ribbon11-wrapper{
width:100%;
}

.ribbon11-wrapper img{
border:1px solid #008BA2;
  float:right;
margin:10px;
width:40%;
margin-top:20px;
}



.waku2{
border:2px solid #74b5c3;
border-radius:5px;

background: #fff;
margin-top:40px;
margin-bottom:40px;
width:98%;
display:block;
padding:20px 20px 20px 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: relative;
display:table;
}

.sp-footer{
display: block;
background:#004465;
background-size: 200%;
width: 100%;
height:65px;
position:fixed;
bottom:0px;
z-index:99999;
border-top:1px solid #fff;
}



.sp-footer .tel-link img{
position: absolute;
top:5px;
left:3%;
width: 45%;
 
	}
.sp-footer .sp-footer-mail img{
position: absolute;
display: inline-block;
top:5px;
right:3%;
width: 45%;
	}



/* ====================================================
クライアント管理画面
==================================================== */
.box_user{

display:inline;
float:right;
margin:0;
margin-top:0px;
margin-right:0px;
font-size:0.8em;
border:0px solid  #efefef;
border-radius:5px;
padding:5px;
}

.s_date01{
width:20%;
margin-top:8px;
display:inline;
}


.form-midium{
width:28%;
display:flex;
line-height:1.75em;

}


.bdr02{


  padding: 20px 15px;
  border: solid 1px #fff;
  position: relative;
border-radius:7px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
background:#fff;
margin:0px;
width:90%;

display: flex;
justify-content: left;  

}

}