/**
Theme Name: 保険デザイナー旭川用CSS
Author: Hitoshi Sasaki
Version: 1.00
**/
img { border:0; vertical-align:bottom; }
html,body  { margin: 0; padding: 0; font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; overflow-x:hidden;}


.ctsFrame { width:980px; margin:0 auto; position:relative; }
.ctsFrame::after { display: table; content: " "; clear: both; }

header { width:100%; position:fixed; top:0; z-index:999; background-color:#FFF; }
h1 { position:relative; margin:0; padding:12px 0 ; }
h1 div { position:absolute; top:12px; left:60px; font-size:10px; }
#menu { background-color:#0068B6; height:32px; padding:2px 0; text-align:center; }
#menu ul { width:100%; margin: 0 auto; padding:0; border-top:1px solid #FFF; height:64px; border-bottom:1px solid #FFF; height:30px; display:flex; justify-content:center; list-style-type:none;   }
#menu ul li { line-height:30px; margin:0; padding:0; width:122px; text-align:center; }
#menu a { color:#FFF; text-decoration:none; display:block; width:122x; height:30px; }
#menu a:hover { background-color:#FFFFFF; color:#0068B6; }

#sp_menu  { display:none; }

#hContact { width:320px; position:absolute; top:0; right:0; text-align:center; background-color:#0068B6; color:#FFF; border-radius: 0 0 24px 24px; padding-bottom:8px; }
#hContact div { font-size:140%; line-height:24px; }
#hContact div img { vertical-align:middle; margin:0 4px 0 0; }

@media screen and (max-width:640px){
	.ctsFrame { width:100%; }
	#menu,#hContact { display:none; }
	h1 { width:96%; margin:0 auto; }

    #sp_menu { display:block; position: fixed; top:0;z-index:999;}

    #gNav { 
        position: fixed;
        top: 0;
        right:-100%;
        z-index: 999;
        transition: right 1s;
        -webkit-transition: right 1s;
        -moz-transition: right 1s;
        width:60vw;
        height: 100vh;
        padding-top: 54px;
        background-color: rgba(118,178,187,0.9);
    }
    #gNav:target { right: 0; }

    #gNav a { color:#FFF; text-decoration: none; display:block; }
    #gNav ul { width:90%; margin: 0 auto; padding: 0; }
    #gNav li { list-style-type: none; border-bottom: 1px dotted #FFF; padding: 1vh 0;}
    .sp_drop { position: fixed; top:8px; right:8px;  }
    .sp_close{ position: absolute; top:8px; right:8px;  }
}

@media screen and (max-width:440px){
	h1 img { width:300px; height:auto; }
	h1 div { left:46px; }
}

footer { width:100%; background-color:#0068B6; color:#FFF; padding:24px 0 0 0; }
footer.cstFrame { padding-bottom:24px;}
#ftCompany { width:50%; float:left; font-size:80%; }
#ftCompany div { font-size:140%; }
#ftCompany a { display:inline-block; text-decoration:none; color:#000; background-color:#FFF; font-size:12px; padding:4px; text-indent:14px; border-radius: 4px; }
#ftPtList { width:35%; float:right; font-size:80%; border-left:1px solid #FFF; padding-left:0.5em; }
#copyright { font-size:80%; text-align:center; margin-top:14px; background-color:#00479D; }


@media screen and (max-width:640px){
	#ftCompany { float:none; width:90%; margin:0 auto; }
	#ftPtList  { float:none; width:90%; margin:24px auto 0; border:0; }
}


section { margin:0 auto; padding:138px 0 24px; width:980px; }
section::after { display: table; content: " "; clear: both; }

section h2 { margin:0; padding:0; position:relative; width:980px; height:120px; border:1px solid #CCC; }
section h2 img { position:absolute; top:0; left:0; z-index:1; }
section h2 span { position:relative; z-index:10; line-height:120px; display:inline-block; width:200px; text-align:center; background-color:rgba(255,255,255,0.4); }

#home h2 { clear:both; text-align:center; margin:24px 0 8px 0; border:0;  border-bottom:1px solid #999;  font-family: serif; height:auto; }
div#mp { font-size:22px; text-align:center; font-family: serif; width:100%; max-width:560px; margin:0 auto; text-align:left; }
ul#mp { list-style-type: disc; padding-left:4em; }
ul#gp { list-style-type: decimal; }
ul#mp,ul#gp { font-size:22px; width:100%; max-width:560px; margin:8px auto 48px; font-family: serif; }

ul#tpMenu { margin:0 0 64px -10px; padding:0; }
ul#tpMenu:after { display: table; content: " "; clear: both; }
ul#tpMenu li { width:318px; height:164px; border:1px solid #CCC; float:left; margin:0 0 14px 10px; padding:0; list-style-type:none; position:relative; }
ul#tpMenu li h3 { text-align:right; background-color:rgba(118,178,187,0.7); text-align:center; color:#FFF; margin:0; padding:0; width:100%; position:absolute; bottom:0; left:0; z-index:10; line-height:48px; }
ul#tpMenu li div{ width:318px; height:164px; position:relative; z-index:1; }
ul#tpMenu li:last-child { border:0; }
/*
ul#tpMenu li:last-child { border:0; text-align:center; }
ul#tpMenu li:last-child div { border:1px solid #999; width:207px; height:auto; padding:6px; margin:0 auto; }
*/

div#TMNbox { border:1px solid #999; border-radius:12px; position:relative; height:162px; margin-bottom:64px; }
div#TMNbox h2 { position:relative; top:-18px; background-color:#FFF; width:580px; margin:0 auto; border-bottom:0; }
ul#linkTMN { margin:0 auto;  padding:0; width:936px; display:flex; justify-content: center; }
ul#linkTMN li { width:207px; margin:0 12px; padding:0; list-style-type:none; }
ul#linkTMN li img { max-width:207px; height:auto; vertical-align:middle; border:1px solid #999; }
ul#linkTMN li a { display:block; width:207px; height:71px; text-decoration:none; color:#000; }



div#SJNKbox { border:1px solid #999; border-radius:12px; position:relative; height:162px; margin-bottom:64px; }
div#SJNKbox h2 { position:relative; top:-18px; background-color:#FFF; width:580px; margin:0 auto;  border-bottom:0; }
ul#linkSJNK { margin:0 auto;  padding:0; width:936px; display:flex; justify-content: center; align-items: center; }
ul#linkSJNK li { width:230px; margin:0 2px; padding:0; list-style-type:none; }
ul#linkSJNK li img { max-width:243px; height:auto; vertical-align:middle; }
ul#linkSJNK li a { display:block; width:230px; height:auto; text-align:center; font-size:14px; text-decoration:none; color:#000; }
#btnMyPage { margin-top:15px; }

ul#linkSJNK2 { margin:10px auto 0;  padding:0; width:936px; display:flex; justify-content: center; align-items: center; }
ul#linkSJNK2 li { width:auto; margin:0 2px; padding:0; list-style-type:none; }
ul#linkSJNK2 li img { max-width:320px; height:auto; vertical-align:middle; }
ul#linkSJNK2 li a { display:block; text-align:center; text-decoration:none; }


ul#info    { margin:0 32px; padding:0; }
ul#info  li { list-style-type:none; border-top: 1px dotted #AAA; padding:6px 4px; }
ul#info  li:last-child { border-bottom: 1px dotted #AAA; }
ul#info  li span { display:inline-block; width:120px; }






@media screen and (max-width:640px){
	section  { width:90%; margin:0 auto; padding-top:100px; }
	section h2 { width:100%; height:auto; overflow:hidden; margin:0 auto; font-size:3.8vw; padding:0; }
	section h2 img { width:100%; height:100%; }
	section h2 span { line-height:8vh;  }
	#home h2 { margin:24px auto;}

	div#mp { font-size:3.6vw; }
	ul#mp,ul#gp { font-size:3.4vw; width:100%; margin:8px auto 48px; }
	ul#mp { padding-left:2em; }

	.swiper-container img{ width:100%; height:auto; }


	ul#tpMenu { margin:0 auto; width:100%; max-width:318px; }
	ul#tpMenu li { margin:0 auto 24px;  }

	div#TMNbox { width:90%; margin:0 auto 24px; padding-bottom:32px; height:auto; }
	div#TMNbox h2 { font-size:3.2vw; width:90%; top:-10px; text-align:center; }
	ul#linkTMN { width:100%; flex-wrap:wrap; }
	ul#linkTMN li { width:auto; height:auto; margin-bottom:24px; }


	div#SJNKbox { width:90%; margin:0 auto; height:auto; margin-bottom:24px; }
	div#SJNKbox h2 { font-size:3.2vw; width:90%;  top:-10px; text-align:center; }
	ul#linkSJNK { width:100%; flex-wrap:wrap; }
	ul#linkSJNK li { margin-bottom:24px; }


	ul#linkSJNK2 { width:90%; margin:0 auto; height:auto; margin-bottom:24px; display:block; }
	ul#linkSJNK2 li { margin-bottom:24px; }
	ul#linkSJNK2 li img { max-width:100%; height:auto; vertical-align:middle; }

	ul#info  li span { display:block; width:auto; }

}


/* greeting */
#greeting h3 { font-size:160%; font-family: serif; }
#greeting p img { float:left; margin: 0 32px 14px 0;  }
#greeting div { text-align:right; }


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

	#greeting h3 { font-size:4.2vw; }
	#greeting p img { float:none; width:100%; height:auto; }
}


/* company */
#company dl { width:880px; margin:32px auto; line-height:200%; }
#company dt { clear:both; float:left; width:120px; margin:0 0 0 0; border-top:1px dotted #0068B6; }
#company dd { margin:0 0 0 120px; border-top:1px dotted #0068B6;  }
#company dt:first-of-type { border:0; }
#company dd:first-of-type{ border:0; }
#company dd iframe { margin-top:6px; }

@media screen and (max-width:640px){
	#company dl { width:100%; font-size:2.8vw; }
	#company dt { width:100px; }
	#company dd { margin:0 0 0 100px;}
	#company dt:last-of-type {float:none; width:100%; }
	#company dd:last-of-type { margin:0; }
	#company iframe { width:100%; }

}


/* work */
dl#hoken { }
dl#hoken dt { border:1px solid #0000FF; border-bottom:0;}
dl#hoken dt a { text-decoration:none; display:block; width:100%; padding:6px; box-sizing:border-box; }
dl#hoken dd { margin:0; padding:0; border:1px solid #0000FF; padding:6px; box-sizing:border-box;  margin-bottom:24px; }

#works h3 { text-align:center; border-bottom:1px solid #CCC; }

#salesPolicy {  margin:0; padding:0; }
#salesPolicy dd {  margin:0; padding:0; }
#salesPolicy dd ul {  margin:0 0 0 24px; padding:0; }
#salesPolicy dd li { list-style-type:none; text-indent:-1.5em; margin:0 0 0 2em; padding:0; }

#salesPolicyB {  margin:0; padding:0; }
#salesPolicyB dd {  margin:0 0 24px 0; padding:0; }
#salesPolicyB dd ul {  margin:0 0 0 24px; padding:0; }
#salesPolicyB dd li { list-style-type:disc; text-indent:0; margin:0 0 0 1em; padding:0; }

a#wkPP { display:block; border:3px double #000; text-align:center; padding:6px; margin-top:24px; text-decoration:none; color:#0000FF; }
a#wkPP:hover { background-color:#b0c4de; }

a#wkISP { display:block; border:3px double #000; text-align:center; padding:6px; margin-top:0; text-decoration:none; color:#0000FF; }
a#wkISP:hover { background-color:#b0c4de; }

#blkFrame { text-align:center; width:100%; border:1px solid #CCC; padding:84px; margin:24px 0; box-sizing:border-box; }

/* staff */
#staff h3 { text-align:center; }
#stfConcept { text-align:center; border:1px solid #CCC; border-radius:14px; width:80%; margin:24px auto 0; padding:14px 0; }
#stfConcept div { font-size:160%; }
#stfConcept strong { color:#ea68a2; }
#stfConcept span { border-bottom:4px double #0068b6; display:inline-block; margin:8px 0; font-size:140%;  }
#staff h4 {clear:both;  border:1px solid #0068b6; padding:6px; border-radius:4px; border-left:32px solid #0068b6; }
#staff h4#ofstf {  border:1px solid #ec6841;  border-left:32px solid #ec6841; }
 
#staff ul {  margin:0 0 0 -22px; padding:0;  }
#staff li { float:left; width:310px; font-size:80%; list-style-type:none; margin:0 0 24px 22px; padding:0; border:1px solid #0068b6; border-radius:4px;  }
.stfImg { float:left; width:120px; height:134px; background-color:#0068b6; text-align:center; padding:12px 0;}
.stfName { color:#FFF; margin-top:6px; }
.stfName div { font-size:70%; }
.stfProfile { padding:8px 0; margin-left:128px; }

ul#stfOffice li { border:1px solid #ec6841;  }


#ofstfImg { float:right; width:320px; height:320px; overflow:hidden; text-align:right; margin-left:32px; }

@media screen and (max-width:640px){
	#stfConcept { width:100%; }
	#stfConcept { font-size:3.6vw;}
	#stfConcept div,#stfConcept span {font-size:100%; }
	#staff ul { width:310px; margin:0 auto; }
	#staff li { width:100%; margin:0 0 24px; }

	#ofstfImg { float:none; width:100%; height:auto; margin:0 0 8px 0; }
	#ofstfImg img { width:100%; height:auto; }
}


/* contact */
#frmbox { border:1px solid #CCC; background-color:#76b2bb; border-radius:14px; width:90%; margin:24px auto; padding:14px; }
#frmbox dl { width:96%; margin:0 auto; }
#frmbox dt { }
#frmbox dd { margin:0 0 14px 0; padding:0; }
#frmbox dd input,#frmbox dd textarea { width:100%; padding:8px; box-sizing:border-box; }
#frmbox dd textarea { height:120px; }
#btnBox { text-align:center; }
#btnBox button { padding:8px; }

#ctTel { width:320px; margin: 0 auto; padding:24px; text-align:center; border-top:1px solid #000; border-bottom:1px solid #000; font-size:140%; }

.mgbox { text-align:center;  color:blue; border:1px solid #0000FF; padding:4px; margin:14px auto; width:80%; }
.errbox { text-align:center; color:#FF0000; }


.stfofImg { float:left; width:120px; height:134px; background-color:#ec6841; text-align:center; padding:12px 0;}

section#privacy h2 { height:auto; padding:0 6px; box-sizign:border-box;}
section#privacy dl { margin-top:32px; }
section#privacy dt { }
section#privacy dd { margin:0 0 1.5em 3em; padding:0; }

/* 情報セキュリティ */
section#infosec h2 { height:auto; padding:0 6px; box-sizign:border-box;}
section#infosec dl { margin-top:32px; }
section#infosec dt { }
section#infosec dd { margin:0 0 1.5em 1.2em; padding:0; }

/* FD */
p.fdClm { text-indent:-7.0em; padding-left:7.0em; }
p.fdClm span { display:inline-block; margin-left:7.0em; }

dl#fdDl dd { margin:0 0 1.5em 2em; padding:0; }
dl#fdDl dd table { margin-bottom:1em; }
dl#fdDl dd table th,dl#fdDl dd table td { padding:0 0.5em;  }
dl#fdDl dd table td { text-align:center;  }

/* icon */
.arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;

}
.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.arw1::before{
    width: 12px;
    height: 12px;
    -webkit-border-radius: 25%;
    border-radius: 25%;
    background: #7a0;
margin-left:4px;
}
.arw1::after{
    left: 5px;
    box-sizing: border-box;
    width: 3px;
    height: 3px;
    border: 3px solid transparent;
    border-left: 3px solid #fff;
margin-left:4px;
}



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



}