@charset "utf-8";
/* CSS Document */
/*
Theme Name: 北海道薬剤師会2024
Theme URI: 
Description: 
Version: 1.0
Author: SUDA WEB TEAM and WEB PROJECT
Author URI: http://www.suda.co.jp
Tags:
*/

/*commonにない共通もの*/

.borderRadiusA30 { border-radius: 30px; }
.borderRadiusA20 { border-radius: 20px; }

.fs13 { font-size: 1.3rem!important; }
.fs14 { font-size: 1.4rem!important; }
.fs16 { font-size: 1.6rem!important; }
.fs20 { font-size: 2.0rem!important; }
.fs24 { font-size: 2.4rem!important; }
.fs30 { font-size: 3.0rem!important; }
.fs36 { font-size: 3.6rem!important; }
.fs60 { font-size: 6.0rem!important; }
@media only screen and (max-width: 766px) {
    .fs16 { font-size: 1.4rem!important; }
    .fs24 { font-size: 1.8rem!important; }
    .fs30 { font-size: 2.0rem!important; }
    .fs36 { font-size: 2.4rem!important; }
}

.fcOrange { color: #fa7e00; }
.fcBlue1 { color: #47BEE2; }
.fcBlue2 { color: #49A5BA; }
.fcBlue3 { color: #335E68; }
.fcBlue4 { color: #103784; }
.fcDeepPink { color: #cb5050; }
.fcPink { color: #ed5f81; }
.fcGreen { color: #39B54A; }
.fcRed { color: #C71A1A; }
.fcWhite { color: #fff; }
.fcBlack { color: #000; }

.fw900 { font-weight: 900;}

.bgBlue1 { background: #47BEE2; }
.bgBlue2 { background: #49A5BA; }
.bgBlue3 { background: #335E68; }
.bgWhite { background: #fff; }
.bgOrange { background: #fa7e00; }
.bgGreen { background: #39B54A; }
.bgRed { background: #C71A1A; }

.btn { display: block; text-align: center; padding: 15px 10px; margin: 1.5rem auto; cursor: pointer; width: 80%; max-width: 500px; font-size: 1.6rem; font-weight: 600; border-radius: 40px; }
.btn:hover { opacity: 0.5;}

.w100per { width: 100%; }
.w90per { width: 90%; }


.table01 { border-collapse: collapse; border: solid 1px #999; }
.table01 tr th { padding: 2rem; line-height: 1.6; font-size: 1.6rem; border: solid 1px #ccc; color: #fff; background: #0088b8; font-weight: 700; text-align: center; }
.table01 tr td { padding: 2rem; line-height: 1.6; font-size: 1.6rem; border: solid 1px #ccc; color: #333; background: #fff; text-align: center; }

.dropShadow { -webkit-filter:drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.2)); -moz-filter:drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.2)); -ms-filter:drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.2)); }


/*BasicLayout*/
#contentsWrap { width: 100%; height: auto; }
.sideMenu { width: 320px; padding: 2rem 2.5rem; background: linear-gradient(90deg, rgba(43,179,217,0.5) 0%, rgba(204,224,244,0.5)100%); mix-blend-mode: multiply; }
.mainCont { width: calc(100% - 320px); padding: 2rem 5rem 0 0; }
@media only screen and (max-width:768px){
    .mainCont { width: 100%; padding: 0; }
  }
  
/*override*/
body { background: #f0f6fc; }
.inner { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 2rem; }
@media only screen and (max-width:768px){
  .inner { width: 100%;}
}

/*HOME*/
.home .pickup { padding: 0; }
.home .pickup .article { width: 46%; margin: 2%; padding: 1rem; background: #fff; border: solid 3px #2bb3d9; -webkit-filter:drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.2)); -moz-filter:drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.2)); -ms-filter:drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.2)); }
.home .pickup .article a { width: 100%; height: 100%; }
.home .pickup .article .thumbArea { width: 25%; height: auto; margin-right: 1%; }
.home .pickup .article .thumbArea img { width: 100%; height: auto; }
.home .pickup .article .textArea { width: 73%; position: relative; }
.home .pickup .article .textArea h4 { font-size: 1.8rem; font-weight: 600; color: #333; }
.home .pickup .article .textArea p { font-size: 1.6rem; font-weight: 600; color: #29abe2; position: absolute; bottom: 0; right: 0; }
.home .pickup .article a:before { content: ''; display: inline-block; position: absolute; right: 15px; top: 43%; width: 10px; height: 10px; border-bottom: 2px solid #29abe2; border-right: 2px solid #29abe2; transform:rotateZ(-45deg); }
@media only screen and (max-width: 766px) {
    .home .pickup { display: block; }
    .home .pickup .article { width: 100%; margin-bottom: 2rem; }

}
.home .topNewsArea { display: block; background: #fff; padding: 2rem; }
.home .topNewsArea .article { width: 100%; margin: 1rem auto; }
.home .topNewsArea .article a { width: 100%; padding: 0.7rem 0; }
.home .topNewsArea .article a .dayTime { width: 15%; margin-right: 2%; font-size: 1.4rem; font-weight: 500; color: #333; }
.home .topNewsArea .article a .category { width: 20%; margin-right: 2%; }
.home .topNewsArea .article a .catBg { width: 100%; background: #103784; color: #fff; font-size: 1.4rem; font-weight: 500; padding: 0.5rem; }
.home .topNewsArea .article a .articleTitle { width: 56%; font-size: 1.6rem; font-weight: 600; }
@media only screen and (max-width: 766px) {
    .home .topNewsArea .article a .dayTime { width: 100%; margin:0 0 0.5rem 0; font-size: 1.4rem; font-weight: 500; color: #333; }
    .home .topNewsArea .article a .category { width: 100%; margin:0 0 0.5rem 0; }
    .home .topNewsArea .article a .articleTitle { width: 100%; font-size: 1.6rem; font-weight: 600; }
}


.home .topLogin .column3 { border: solid 3px #ccc; background: #fff; text-align: center; padding: 1rem; }
.home .topLogin .column3 h4 { font-size: 1.4rem; font-weight: 600; }
@media only screen and (max-width: 766px) {
    .home .topLogin .column3 { width: 100%; margin-bottom: 1rem; }

}

.manaable { width: 100%; margin: 2rem auto; padding: 2rem; background: #ffd71d; }
.manaable a { width: 100%; display: flex; }
.manaable a div:nth-of-type(1) { width: 25%; }
.manaable a div:nth-of-type(1) p { font-size: 2.6rem; font-weight: 600; color: #00a73c; background: #fff; text-align: center; padding: 1rem 0; }
.manaable a div:nth-of-type(2) { width: 70%; }
.manaable a div:nth-of-type(2) p:nth-of-type(1) { font-size: 3.0rem; font-weight: 600; color: #000; margin-bottom: 1rem; }
.manaable a div:nth-of-type(2) p:nth-of-type(2) { display: inline; font-size: 2.6rem; font-weight: 600; color: #cc0000; border: solid 2px #cc0000; padding: 0.5rem 2rem; }
.manaable a:before { content: ''; display: inline-block; position: absolute; right: 15px; top: 43%; width: 10px; height: 10px; border-bottom: 2px solid #333; border-right: 2px solid #333; transform:rotateZ(-45deg); }
@media only screen and (max-width: 766px) {
    .manaable a { width: 100%; display: block; }
    .manaable a div:nth-of-type(1) { width: 100%; }
    .manaable a div:nth-of-type(1) p { font-size: 2.0rem; }
    .manaable a div:nth-of-type(1) p br { display: none; }
    .manaable a div:nth-of-type(2) { width: 100%; }
    .manaable a div:nth-of-type(2) p:nth-of-type(1) { font-size: 2.4rem; }
    .manaable a div:nth-of-type(2) p:nth-of-type(2) { display: block; font-size: 2.0rem; text-align: center; }
}

.bank { width: 100%; margin: 2rem auto; border: solid 4px #29abe2; background: url(assets/images/bank_bg.jpg) no-repeat #fff; background-size: 25%; }
.bank:before { content: ''; display: inline-block; position: absolute; right: 15px; top: 43%; width: 10px; height: 10px; border-bottom: 2px solid #333; border-right: 2px solid #333; transform:rotateZ(-45deg); }
.bank a { width: 100%; padding: 2rem; display: block; text-align: center; }
.bank p { font-size: 2.0rem; font-weight: 600; color:#cb5050; }
@media only screen and (max-width: 766px) {
    .bank { padding-left: 50px; background: url(assets/images/81926868.webp) no-repeat top left #fff; background-size: 25%; }
    .bank p { font-size: 1.6rem; }

}

.school { width: 100%; margin: 2rem auto; border: solid 4px #29abe2; background: url(assets/images/school_bg.jpg) no-repeat #fff; background-size: 25%; }
.school:before { content: ''; display: inline-block; position: absolute; right: 15px; top: 43%; width: 10px; height: 10px; border-bottom: 2px solid #333; border-right: 2px solid #333; transform:rotateZ(-45deg); }
.school a { width: 100%; padding: 2rem; display: block; text-align: center; }
.school p { font-size: 2.0rem; font-weight: 600; color:#cb5050; }
@media only screen and (max-width: 766px) {
    .school { padding-left: 50px; background: url(assets/images/81926868.webp) no-repeat top left #fff; background-size: 25%; }
    .school p { font-size: 1.6rem; }

}


/** parts **/

.headerEmb { width: 100%; margin: 0 auto 2rem; display: block; }
.headerEmb img { width: 100%; height: auto; }



.sideMenuInner ul li { padding: 0rem; margin: 0.7rem auto; }
.sideMenuInner ul li a { display: block; font-size: 1.5rem; font-weight: 600; color: #fff; position: relative; padding: 1.4rem 0 1.4rem 2.2rem; background: #49a5ba; -webkit-filter:drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.2)); -moz-filter:drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.2)); -ms-filter:drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.2)); }
.sideMenuInner ul li a:before { content: ''; display: inline-block; position: absolute; left: 5px; top: 20px; width: 10px; height: 10px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; transform:rotateZ(-45deg); }
.sideMenuInner ul li span p { font-size: 1.4rem; font-weight: 500; display: block; padding: 1rem 0 2rem 2rem; line-height: 1.2; }

.sidebarSearchArea .screen-reader-text { display: none; }
.sidebarSearchArea .search-field { width: 100%; border: solid 1px #333; border-radius: 30px; }
.sidebarSearchArea .search-submit { width: 50%; margin: 1rem auto; display: block; background: #333; color:#fff; font-weight: 600; border-radius: 30px; }
.sidebarLinkArea a { display: block; text-align: right; font-size: 1.4rem; }
.sidebarLinkArea a img { border: solid 1px #ccc; }

@media only screen and (max-width:768px){
    .sideMenu { display: none; }
    .mainCont { width: 100%; }
    .mainMenuBlock { display: none; }
    .cont { padding: 10px; }
    .topColumn .contBody { display: block; }
    .sphead { width: 100%; }

  }




.headerMenuBlock { padding: 0.5rem 6rem 0 0; }
.headerMenuSub { display: flex; justify-content: flex-end; }
.headerMenuSub a { border-right: solid 1px #999; margin-right: 10px; }

footer { background: #EBEBEB; padding: 6rem 0; }
.footerLogo { display: block; margin: 0 auto 30px; }
.footerMenuSub { display: flex; justify-content: center; }
.footerMenuSub a { border-right: solid 1px #999; margin-right: 10px; }
@media only screen and (max-width:768px){
    footer { padding: 6rem 0 10rem!important; }
    .footerMenuSub { display: none; }

}

.sticky { width: 55px; position: fixed; top: 80px; right: 0; }
.sticky a { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin-top: 10px; padding: 3rem 1.5rem; letter-spacing: 0.1rem; font-weight: 700; border-radius: 10px 0 0 10px; }
.sticky a img { width: 25px; height: auto; margin: 0 auto 10px; }
@media only screen and (max-width: 766px) {
    .sticky { width: 100%; position: fixed; top: 92vh; display: flex; flex-wrap: wrap; z-index: 99; }
    .sticky a { width: calc(100%/3); writing-mode: horizontal-tb; margin: 0; padding: 0 0 1rem 0; letter-spacing: 0; height: 10vh; text-align: center; border-radius: 0 0 0 0; font-size: 1.1rem!important; display: flex; align-items: center; justify-content: center; }
    .sticky a img { margin: 0 10px -2px 0; }
    .sticky a:nth-of-type(1) { left: 0; }
    .sticky a:nth-of-type(1) { left: 50%; }
}

main .contTit { display: block; position: relative; font-size: 2.6rem; font-weight: 600; color: #333; padding: 0 0 2rem 0; margin: 4rem 0 4rem 0; text-align: center; }
main .contTit::after { content: ""; border-bottom: solid 5px #103784; width: 50px; position: absolute; bottom: 0; left: 47%; }
@media only screen and (max-width: 766px) {
    main .contTit { width: 100%; }

}


main section { padding-top: 60px; padding-bottom: 60px; }
.cat { width: auto; padding: 5px 10px; color: #fff; font-size: 1.6rem; font-weight: 600; background: #49A5BA; }
.columnCat-column { background: #47BEE2; }
.columnCat-info { background: #C71A1A; }
@media only screen and (max-width: 766px) {
    main section { padding-top: 20px; padding-bottom: 20px; }
}

main .contHead {}
main .contBody { padding: 2rem; background: #fff; }
@media only screen and (max-width: 766px) {
    main .contBody { padding: 2rem 1rem; }

}



/*single*/
.single .catName { display: block; text-align: center; font-size: 2rem; font-weight: 600; letter-spacing: 0.2rem; color: #2bb3d9; padding: 3rem 0 0; opacity: 0.6; }
.single .contTit { width: 100%; font-size: 3.0rem; }
.single .contBody { line-height: 1.4; color: #333; }
.single .contBody p { margin: 2.6rem 0; font-size: 1.8rem; }
.single .contBody h2 { font-size: 2.6rem; font-weight: 600; margin: 6rem 0 2.6rem; border-bottom: solid 1px #49a5ba; }
.single .contBody ul { margin: 2.6rem 0; list-style-type: circle; padding-left: 2.6rem; }
.single .contBody ol { margin: 2.6rem 0; list-style-type: decimal; padding-left: 2.6rem; }
.single .contBody li { font-size: 1.8rem; margin: 1.8rem 0; }
.single .contBody a { font-size: 1.8rem; text-decoration: underline; margin: 1.8rem 0; }
.single .contBody table { width: 100%; margin: 2.6rem auto; font-size: 1.8rem; }
.single .contBody th { padding: 1rem; font-size: 1.8rem; border: solid 1px #999; background: #ccc; }
.single .contBody td { padding: 1rem; font-size: 1.8rem; border: solid 1px #999; }
.singleMetaBox { padding: 0.5rem 1.5rem; margin: 2rem; background: #f5f5f5; }
.singleMetaBox p { margin: 1rem 3rem 1rem 0!important; font-size: 1.4rem!important; }
.singleMetaBox a { font-size: 1.4rem!important; }
@media only screen and (max-width: 766px) {
    .single .contTit { font-size: 2.2rem!important; }
    .single .contBody p { margin: 2.6rem 0; font-size: 1.6rem; }
    .single .contBody h2 { font-size: 2.0rem; }
    .single .contBody li { font-size: 1.6rem; }
    .single .contBody th { font-size: 1.6rem; }
    .single .contBody td { font-size: 1.6rem; }
    
    .singleMetaBox { padding: 0.5rem; margin: 2rem auto; }
    .singleMetaBox p { margin: 0.5rem 1rem 0!important; }

}

/*category*/
.category article { margin: 0 0 1rem 0; padding: 1rem 0 2rem; border-bottom: dashed 1px #ccc; }
.category .singleMetaBox { background: none; padding: 0; margin: 0; color: #666; }
.category .articleTitle a { font-size: 1.8rem; }

/*breadcrumb*/
#breadcrumbs { padding:1rem 0; }
#breadcrumbs ul { display: flex; justify-content: flex-start; }
@media only screen and (max-width: 766px) {
    #breadcrumbs ul { display: flex; justify-content: flex-start; flex-wrap: wrap; }
    #breadcrumbs ul li { font-size: 1.4rem!important; }
}



@media only screen and (max-width: 766px) {
    form input { width: 100%!important; }
    footer a[href^="tel:"]{ color: #fff!important; font-weight: 600; }
    .btn  a[href^="tel:"]{ color: #fff; font-weight: 600; }
    p a[href^="tel:"]{ color: #000; font-weight: 600; }
}

.formCheckBoxWrap { display: flex; justify-content: flex-start!important; flex-wrap: wrap; }
.formCheckBoxWrap .mwform-checkbox-field { margin: 1rem!important; }
@media only screen and (max-width: 766px) {
    .formCheckBoxWrap .mwform-checkbox-field { width: 100%; }
    .formCheckBoxWrap .mwform-checkbox-field input[type=checkbox] { width: auto!important; }
}

.link .articleBody ul { list-style-type: circle; padding: 2rem 2rem 2rem 5rem; }
.link .articleBody ul li { margin: 2rem 0; }
.link .articleBody ul li a { font-size: 1.8rem; font-weight: 600; padding: 1rem 0; }


@media only screen and (max-width: 766px) {
    #mdl-nav { background: rgba(116, 205, 233, 0.7); padding: 2rem 1rem; }
    .spMenuWrap { list-style-type: none; }
    .spMenuWrap li { margin: 0.1rem 0; padding: 1rem 2rem; background: #fff; }
    .spMenuWrap li a { display: block; font-size: 1.6rem; font-weight: 700; padding: 0.7rem 1.4rem; margin: 1rem; background: #103784; color: #fff; border-radius: 50px; text-align: center; }
    .spMenuWrap li a span { display: block; margin: 1rem; }
    .spMenuWrap li a span p { font-size: 1.2rem!important; color: #333; text-align: center; }
}


.specialBanner { width: 100%; height: auto; margin: 0 auto; }
.specialBanner .banner { width: 100%; height: auto; margin: 1rem auto; }
.specialBanner .banner a { width: 100%; height: auto; display: block; position: relative; padding: 2rem; margin: 2rem auto; -webkit-filter:drop-shadow(3px 3px 0px rgba(0, 0, 0, 0.2)); -moz-filter:drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.2)); -ms-filter:drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.2)); text-align: center; color: #fff; font-size: 2.6rem; font-weight: 700; }
.specialBanner .banner a:before { content: ''; display: inline-block; position: absolute; right: 15px; top: 43%; width: 10px; height: 10px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; transform:rotateZ(-45deg); }

.specialBanner .banner:nth-of-type(1) a { background: #e25300; }
.specialBanner .banner:nth-of-type(2) a { background: #cc0000; }
.specialBanner .banner:nth-of-type(3) a { background: #0088b8; }

.anti-dopingMidashi1 { background: #49A5BA; color: #fff; font-size: 1.8rem; font-weight: 500; padding: 0.7rem; }