@charset "utf-8";

/*article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0; margin: 0; font-weight: normal;}
a{text-decoration:none;}
table {border-spacing: 0;}
fieldset,img {border: 0;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal; font-style: normal;}
strong{font-weight: bold;}
ol,ul,li {list-style: none; margin:0;padding:0;}
caption,th {text-align: left;}
h1,h3,h4,h5,h6 {margin:0; padding:0;}
q:before,q:after {content:'';}
abbr,acronym {border: 0;}
img {max-width: 100%;}
table {width: 100%;}
.clear {clear:both;}
.clearfix:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix { min-height: 1px;}
* html .clearfix { height: 1px;}
*{box-sizing: border-box; list-style: none;}
input[type="text"],input[type="tel"],input[type="email"],input[type="reset"],input[type="submit"], textarea {-webkit-appearance: none; border-radius: 0;}

img,canvas,iframe,video,svg{max-width:100%}
img{margin: 0; padding: 0; vertical-align: bottom; max-width: 100%; height: auto;}

.overflow-container{overflow-y:scroll; -webkit-overflow-scrolling:touch;}*/
a, a::before, a::after, a img{transition: all 0.2s;}
a:hover, a:hover img{opacity: 0.7;}

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

*{box-sizing: border-box; list-style: none;}
img,canvas,iframe,video,svg{max-width:100%}
img{margin: 0; padding: 0; vertical-align: bottom; max-width: 100%; height: auto;}

html{
overflow: auto;
width: 100%;
height: 100%;
}
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', sans-serif;
font-size: 0.9em;
line-height: 1.6;
color:#222;
background: #fff;
}



.contents #container {
    line-height: 30px; /* 行の高さ */
    margin: 0 auto; /* 領域間のスペース */
    padding: 0 0 50px 0; /* 領域内のスペース */
}

a:hover {
    text-decoration: none;
    color: #5cadda;
}

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







/* --------------------------------------グローバルメニューここまで */

/* ---------------------------------------------------------
	設定
--------------------------------------------------------- */

/* 色
--------------------------------------------------------- */
:root {
  --primary-color: #;
  --second-color:  #;
	--accent-color:  #;
	--text-color:    #222;
	--border-color:  #707070;
  --blue:   #4A88AE;
	--blue:   #1c73a6;
	/*--blue:   #2E7BB6;*/
  --red:    #EC6D74;
  --yellow: #F6AD54;
  --green:  #2EB6AA;
	--white:  #fff;
	--gray:   #aaa;
	
	--fn1:    #17ae5e;
	--fn3:    #379ad6;
}


/* レイアウト
--------------------------------------------------------- */
.contents.mayaku #mainContent section{
margin-bottom: 4em;
}

.content-wrap{
display: flex;
justify-content: space-between;
align-items: flex-start;
}

/* 文字・タイトル
--------------------------------------------------------- */
.contents.mayaku #mainContent h2.section-title, .contents.mayaku #mainContent h1.section-title {
margin: 1em 0 2em;
padding: 0.5em 0.8em;
font-size: 1.2rem;
letter-spacing: 0;
color: #fff;
background: none;
background-color: #20328B;
background-color: #1D5C81;
}
.contents.mayaku #mainContent h3.heading, .contents.mayaku #mainContent h2.heading {
margin: 2em 0 1.5em;
padding: 0;
font-size: 18px;
font-weight: 500;
text-align: left;
color: #20328B;
color: #1D5C81;
background: none;
border-bottom: 1px solid #20328B;
border-bottom: 1px solid #1D5C81;
}
.contents.mayaku #mainContent h4.subheading, .contents.mayaku #mainContent h3.subheading{
margin: 1em 0 0.3em;
padding: 0;
font-size: 1em;
font-weight: 600;
text-align: left;
border-bottom: none;
}
.contents.mayaku #mainContent h4.subheading::before, .contents.mayaku #mainContent h3.subheading::before {
content: "■";
}


/* ボタン
--------------------------------------------------------- */
.m-btn{
width: 100%;
max-width: 200px;
margin: 0;
}
.m-btn a{
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0.5em 1em;
font-size: 0.85rem;
text-align: center;
color: #fff;
background-color: var(--blue);
text-decoration: none;
border-radius: 5px;
line-height: 1.3;
}
/*.m-btn a:hover{opacity: 0.7;}*/

.m-btn.html > a { background-color: var(--yellow);}
.m-btn.zip > a, .m-btn.file > a { background-color: var(--red);}
.m-btn.pdf > a { background-color: var(--blue);}

.m-btn a.disabled{
pointer-events: none;
background-color: #aaa;
}



.m-arrow-btn{
width: 100%;
max-width: 200px;
margin: 0;
}
.m-arrow-btn + .m-arrow-btn{
margin-top: 1em;
}
.m-arrow-btn a, .m-product-btn a, .m-material-btn a{
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 100%;
padding: 0.8em 1em;
line-height: 1.3;
color: var(--text-color);
/*border: 1px solid var(--blue);*/
transition: 0.2s;
position: relative;
padding-left: 35px;
text-decoration: none;
}
.m-arrow-btn a{
border-radius: 5px;
border: 1px solid var(--blue);
}
.m-arrow-btn a::before, .m-product-btn a::before, .m-material-btn a::before {
content: '';
width: 18px;
height: 18px;
background-color: var(--blue);
border-radius: 50%;
position: absolute;
top: 50%;
left: 10px;
margin-top: -9px;
}
.m-arrow-btn a::after, .m-product-btn a::after, .m-material-btn a::after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 8px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 50%;
left: 16px;
margin-top: -5px;
}
.m-arrow-btn a:hover{
color: #fff;
background-color: var(--blue);
opacity: 1;
}
.m-arrow-btn a:hover::before {background-color: #fff;}
.m-arrow-btn a:hover::after {
border-color: transparent transparent transparent var(--blue);
}

.m-product-btn a, .m-material-btn a{
color: #fff;
background-color: var(--blue);
border-radius: 2px;
}
.m-product-btn a::before, .m-material-btn a::before {
background-color: #fff;
}
.m-product-btn a::after, .m-material-btn a::after {
border-color: transparent transparent transparent var(--blue);
}
.m-material-btn a{background-color: var(--green);}
.m-material-btn a::after {border-color: transparent transparent transparent var(--green);}
/*.m-product-btn a:hover, .m-material-btn a:hover{
opacity: 0.7;
}*/


.btn-form.gold {
background: #e3c05c!important;
box-shadow: none;
}


/* --------------------------------------設定ここまで */

/* ---------------------------------------------------------
	メインコンテンツ
--------------------------------------------------------- */

/* ログイン
--------------------------------------------------------- */
.m-login-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
gap: 2.5em;
margin-top: 2em;
/*margin-bottom: 2.5em;*/
}
.m-login {
flex-basis: calc( 50% - 2.5em / 2 );
margin: 0 auto;
border: 1px solid #aaa;
}
.m-login__login{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: calc(100% - 0.6em - 1rem * 2.4);
}
.m-login.msp {
border: 1px solid #aaa;
}
.m-login__head {
padding: 0.3em 0.8em;
font-size: 1.0rem;
font-weight: 500;
color: #fff;
background-color: var(--blue);
}
.m-login__head.msp {
color: inherit;
background-color: inherit;
}
.m-notlogin__head {
margin: 1.5em 0 0;
padding: 0 1.8em;
font-size: 1.0rem;
font-weight: 600;
}
.m-login p{
margin: 0;
padding: 1.8em;
font-size: 0.95em;
}
/*.m-login p + p{
padding-top : 0.6em;
}*/

p.m-login__contact{
background-color: #eee;
margin: 0 1.5em 1.5em;
padding: 1em;
line-height: 1.6;
}

.m-login__tel{
font-size: 1.4em;
font-weight: 900;
}

.m-login .m-btn{
margin: 0 auto;
padding: 0;
}
.m-login .m-btn a{
padding: 0.7em 1em;
font-size: 1rem;
}

.m-login p.m-login__annotation{
max-width: 440px;
margin-inline: auto;
margin-right: 1em;
font-size: 0.8rem;
line-height: 1.4;
padding-left: 1em;
text-indent: -1em;
}

/* インデックスページ
--------------------------------------------------------- */

.contents.mayaku #mainContent #m-info .m-info-title-wrap{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5em;
}
		
.contents.mayaku #mainContent #m-info h2{
background: none;
/*margin: 30px 0 1em;*/
padding: 0;
/*font-size: 24px;*/
margin: 0px 0 0.2em;
font-size: 19px;
font-weight: 400;
color: var(--blue);
/*color:#79A7CC;*/
}

.contents.mayaku #mainContent #m-info .m-info-title-wrap h2{
margin: 0;
}

.contents.mayaku #mainContent #m-info .m-info-btn{
width: 100%;
max-width: 150px;
margin: 0;
}
.contents.mayaku #mainContent #m-info .m-info-btn a{
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0.5em 1em;
font-size: 1rem;
font-weight: 500;
text-align: center;
color: inherit;
background-color: #B9E3F9;
text-decoration: none;
line-height: 1.3;
}

.m-info-list{
/*max-height: 300px;
overflow-y: scroll;*/
}
.m-info-list li{
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0.6em 0.2em;
border-bottom: 1px dashed var(--border-color);
gap: 0 1em;
}
.m-info-list li:first-of-type{
border-top: 1px dashed var(--border-color);
}
.m-info-list li a{
color: inherit;
}

.m-info-list__date{
min-width: 85px;
}
.m-info-list__cat, .m-guide-list__cat{
display: flex;
align-items: center;
justify-content: center;
min-width: 180px;
padding: 0.5em 0.5em;
font-size: 0.85rem;
color: #fff;
background-color: var(--gray);
/*border-radius: 2px;*/
line-height: 1;
}
.m-guide-list__cat{
min-width: 80px;
max-width: 80px;
margin-bottom: 0.8em;
}

.m-info-list__cat.new,
.m-info-list__cat.red,
.m-guide-list__cat.red{
background-color: var(--red);
}
.m-info-list__cat.housou,
.m-info-list__cat.yellow,
.m-guide-list__cat.booklet,
.m-guide-list__cat.yellow{
background-color: var(--yellow);
}
.m-info-list__cat.interview,
.m-info-list__cat.other,
.m-info-list__cat.chushi,
.m-info-list__cat.green,
.m-guide-list__cat.shidosen,
.m-guide-list__cat.green{
background-color: var(--green);
}
.m-info-list__cat.tenpu,
.m-info-list__cat.blue,
.m-guide-list__cat.blue{
background-color: var(--blue);
}
.m-guide-list__cat.other{background-color: var(--gray);}

.m-info-list__icon{
min-width: 26px;
display: flex;
align-items: center;
}
.m-info-list__icon img{vertical-align: baseline;}
.m-info-list__icon-non{min-width: 26px;}
.m-info-list__cat + .m-info-list__text{margin-left: calc( 26px + 1em );}

.m-info-list__text{
line-height: 1.6;
/*flex-basis: calc( 100% - 75px - 150px - 20px);*/
/*margin-left: auto;*/
}
.m-info-list__title{
background-color: #C0D8F8;
font-weight: 600;
padding-left: 0.8em!important;
}


.m-basic-info, .m-product-info{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
gap: 0;
}
.m-basic-info li, .m-product-info li{
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 0.7em 1.2em;
border-bottom: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
background-color: #FFFAF4;
}
.m-basic-info li:nth-of-type(odd), .m-product-info-wrap .m-product-info:first-of-type li{
border-left: 1px solid var(--border-color);
}
.m-basic-info li:nth-of-type(1), .m-basic-info li:nth-of-type(2), .m-product-info li:nth-of-type(1){
border-top: 1px solid var(--border-color);
}

.m-product-info-wrap{
display: flex;
align-items: flex-start;
width: 100%;
}
.m-product-info{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 0;
width: 100%;
}

.m-product-detail{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
gap: 1em 1.5em;
}


/* 製品詳細
--------------------------------------------------------- */
.m-product-code{}

.m-product-code{
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto;
gap: 0;
}
.m-product-code dt, .m-product-code dd{
margin: 0;
padding: 0.7em 1.2em;
border-bottom: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
}
.m-product-code dt{
border-left: 1px solid var(--border-color);
}
.m-product-code dt:first-of-type, .m-product-code dd:first-of-type{
border-top: 1px solid var(--border-color);
}	
.m-product-code dt {
  background-color: #FFFAF4;
}


/* 製品写真・ロゴデータ
--------------------------------------------------------- */
.m-product-image{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 1.5em;
}
.m-product-image li{
border: 1px solid #eee;
}
.m-product-image figure, .m-product-logo figure{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.m-product-image img{
width: 100%;
height: auto;
max-width: 235px;
aspect-ratio: 241/192;
object-fit: contain;
}

.m-product-logo{
margin-bottom: 2em;
}
.m-product-logo img{
width: 100%;
max-width: 840px;
height: auto;
object-fit: contain;
}
.m-product-logo__dl p{
margin-bottom: 0.5em;
}


/* 指導箋
--------------------------------------------------------- */
.contents.mayaku #mainContent #shidosen h3{
margin: 0 0 1.2em;
padding: 10px 15px;
line-height: 1.2;
letter-spacing: 3px;
border: none;
text-align: center;
font-size: 16px;
background-color: #b9e3f9;
}
.m-guide-list{
/*display: flex;*/
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 3em 2em;
flex-wrap: wrap;
}
/*.m-guide-list li{
flex-basis: calc(50% - 1em);
}*/
.m-guide-list__layout{
display: flex;
justify-content: space-between;
/*align-items: flex-start;*/
gap: 1em;
}
.m-guide-list__layout_text{
display: flex;
flex-direction: column;
flex-basis: calc( 100% - 150px - 1em);
}
.m-guide-list__layout_text p{
margin-bottom: 1.5em;
}
.m-guide-list__dl{
display: flex;
align-items: center;
}
.m-guide-list__layout_text .m-guide-list__dl p{
margin: 0.2em;
}
.m-guide-list__layout .m-arrow-btn, .table07 .m-arrow-btn{
width: fit-content;
max-width: inherit;
}
.m-guide-list__layout .m-arrow-btn span{
font-size: 0.8em;
margin-left: 0.2em;
}

.m-guide-list__dl img{
margin-right: 0.2em;
vertical-align: bottom;
padding-bottom: 3px;
transition: 0.2s;
}

.m-guide-list__layout_image{flex-basis: 150px;}
.m-guide-list__layout_image figure{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.m-guide-list__layout_image figure img{
border: 1px solid #eee;
}
.m-guide-list__layout_image figure img, .m-product-image img{
width: 100%;
height: auto;
object-fit: contain;
}


/* 指導箋注文フォーム
--------------------------------------------------------- */
.fn1-bg{
background-color: var(--fn1)!important;
}
.fn3-bg{
background-color: var(--fn3)!important;
}