@charset "UTF-8";

/* ＜社団nohl.or.jp用＞　フォントのゴシック、メイリオ他指定。ここで背景も設定される（３行目にbackground-color: #-----;で入れる）*/
body {
  margin: 0;
  padding: 0;
  color: #666666;/* 灰色#666666 */
  font-size: 15px;
  font-family: "Hiragino Sans", Meiryo, sans-serif;
  line-height: 2;
}

/* CSSファイルに記載します */
.box1 {
    border: solid 2px black;
    padding: 10px;
    width: 267px;
    border-radius: 10px; /* 角を丸くする */
}

/* 項目の角丸ボックス設定－１－（sanpocenter用） */
.box12{
    border: solid 2px #762f07;
    padding: 5px;
    width: 255px;
    color: #3f0000;
    background-color: #fffafa;
    border-radius: 20px; /* 角を丸くする */
}
.box12 p {
    margin: 0; 
    padding: 0;
}

a {
  color: #3f0000;
  text-decoration: none;
}

a:visited {
  color: #3f0000;
}

a:hover {
  text-decoration: none;
}

/* 項目の角丸ボックス設定－２－（sanpocenter用） */
.box13{
    border: solid 2px #762f07;
    padding: 1px;
    width: 255px;
    color: #3f0000;
    background-color: #fffafa;
    border-radius: 10px; /* 角を丸くする */
}
.box13 p {
    margin: 0; 
    padding: 0;
}

a {
  color: #3f0000;
  text-decoration: none;
}

a:visited {
  color: #3f0000;
}

a:hover {
  text-decoration: none;
}

/* 項目の角丸ボックス設定－(一般社団法人ＮＯＨＬ用） */
.box14{
    border: solid 2px #94bbe8;
    padding: 1px;
    width: 255px;
    color: #666666;
    background-color: #94bbe8;
    border-radius: 10px; /* 角を丸くする */
}
.box14 p {
    margin: 0; 
    padding: 0;
}

a {
  color: #666666;
  text-decoration: none;
}

a:visited {
  color: #666666;
}

a:hover {
  text-decoration: none;
}

/* 　ボタン（オレンジ） */
.btn-gradient-3d-orange {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 20px;
  color: #ffffff;
  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #c58668;
}

.btn-gradient-3d-orange:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

/* 　社団ボタンpink（=薄いピンク#f4d9de）影を2->3に */
.btn-gradient-3d-pink {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 20px;
  color: #ffffff;
  background-image: linear-gradient(to top, #f4d9de 0%, #ffb6c1 100%);
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #c58668;
}

.btn-gradient-3d-pink:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

/* 　ボタン（社団薄いブルー#c1c1dd） */
.btn-gradient-3d-blue {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 20px;
  color: #ffffff;
  background-image: linear-gradient(45deg, #dee3ef 0%, #cbd5f2 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  border-bottom: solid 3px #006dea;
}

.btn-gradient-3d-blue:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

/* ボタン（薄めの緑#bcddc1）(濃いめ緑#6dd67e)*/
.btn-gradient-3d-darkgreen {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 20px;
  color: #ffffff;
  background-image: linear-gradient(to top, #eaffef 0%, #6dd67e 100%);
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #1edb57;/* 濃いめの明るい緑#1edb57 */
}

.btn-gradient-3d-darkgreen:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

/* 　ボタン（社団イエロー）影を2->3に */
.btn-gradient-3d-yellow {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 20px;
  color: #ffffff;
  background-image: linear-gradient(to top, #fff7cc 0%, #f5e1a4 100%);
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #f2d06d;
}

.btn-gradient-3d-yellow:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

/* 　ボタン（診療所（１）　薄緑#dbf7c5→白#ffffff 草色#aece96 */
.btn-gradient-3d-greenwhite {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 20px;
  color: #ffffff;
  background-image: linear-gradient(to top, #dbf7c5 0%, #ffffff 100%);
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #aece96;/* 草色#aece96 */
}

.btn-gradient-3d-greenwhite:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

/* 　ボタン（診療所（２）　キレイな青緑の薄い色#e1f7f4→白#ffffff ターコイズ#00CED1 */
.btn-gradient-3d-bluegreenwhite {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 20px;
  color: #ffffff;
  background-image: linear-gradient(to top, #e1f7f4 0%, #ffffff 100%);
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #00CED1;/* ターコイス#00CED1 */
}

.btn-gradient-3d-bluegreenwhite:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

/* 　ターコイズボタン（社団TOPのリンクに使用 ターコイズ#00CED1　薄いキレイな青緑#e1f7f4 */
.btn-gradient-3d-darkbluegreen {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 20px;
  color: #00CED1;
  background-image: linear-gradient(to top, #ffffff 0%, #00CED1 100%);/* ターコイズ#00CED1 */
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #00CED1;
}

.btn-gradient-3d-darkbluegreen:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

/* 　ターコイズボタン２（solutionのリンクに使用 ターコイズ#00CED1　ターコイズの薄い色#a0faf8 */
.btn-gradient-3d-turquoise {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  border-radius: 20px;
  color: #00CED1;
  background-image: linear-gradient(to top, #ffffff 20%, #aafaf8 80%);/* ターコイズの薄い色#aafaf8*/
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.29);
  border-bottom: solid 4px #00CED1;
}

.btn-gradient-3d-turquoise:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

/*------------ 横並び枠（左）の設定 ------------*/
.box20{
    border: solid 1px #762f07;
    padding: 1px;
    width: 175px;
    color: #3f0000;
    background: none;
    border-radius: 5px; /* 角を丸くする */
}
.box20 p {
    margin: 0; 
    padding: 0;
}

a {
  color: #3f0000;
  text-decoration: none;
}

a:visited {
  color: #3f0000;
}

a:hover {
  text-decoration: none;
}

/*------------ 横並び枠（右）の設定 ------------*/
.box21{
    border: solid 1px #762f07;
    padding: 10px;
    width: 450px;
    color: #3f0000;
    background-color: #fffafa;
    border-radius: 5px; /* 角を丸くする */
}
.box21p {
    margin: 0; 
    padding: 0;
}

a {
  color: #3f0000;
  text-decoration: none;
}

a:visited {
  color: #3f0000;
}

a:hover {
  text-decoration: none;
}


/* ページの外枠指定 sanpocenterで使用の「基本型」*/
.box100{
    border: solid 1px #762f07;
    padding: 10px;
    width: 90%;
    color: #3f0000;
    background: none;
    border-radius: 30px; /* 角を丸くする */
}
.box100 p {
    margin: 0; 
    padding: 0;
}

a {
  color: #3f0000;
  text-decoration: none;
}

a:visited {
  color: #3f0000;
}

a:hover {
  text-decoration: none;
}

/* ページの外枠指定（その２）講話のページで見やすくするため幅を80％に（透明） */
.box101{
    border: solid 1px none;
    padding: 10px;
    width: 80%;
    color: none;
    background: none;
    border-radius: 30px; /* 角を丸くする */
}
.box101p {
    margin: 0; 
    padding: 0;
}

a {
  color: #3f0000;
  text-decoration: none;
}

a:visited {
  color: #3f0000;
}

a:hover {
  text-decoration: none;
}

/* ページの外枠指定 （株）nohl.jp 青基調*/
.box102{
    border: solid 1px #006dea;
    padding: 10px;
    width: 80%;
    color: #006dea;
    background: none;
    border-radius: 30px; /* 角を丸くする */
}
.box102 p {
    margin: 0; 
    padding: 0;
}

a {
  color: #006dea;
  text-decoration: none;
}

a:visited {
  color: #006dea;
}

a:hover {
  text-decoration: none;
}


/* ページの外枠指定 診療所nohc Ｔブルー#81d8d0 */
.box108{
    border: solid 5px #ffffff;/* 枠線白 */
    padding: 20px;
    width: 80%;
    color: #666666;/* 灰色 */
    background: #81d8d0;/* Ｔブルー#81d8d0 */
    border-radius: 40px; /* 角を丸くする */
}
.box108 p {
    margin: 0; 
    padding: 0;
}

a {
  color: #666666;
  text-decoration: none;
}

a:visited {
  color: #666666;
}

a:hover {
  text-decoration: none;
}


/* ページの外枠指定 診療所nohc Ｔブルー輝度下げ#9cd8d2 */
.box104{
    border: solid 5px #ffffff;/* 枠線白 */
    padding: 20px;
    width: 80%;
    color: #666666;/* 灰色 */
    background: #9cd8d2;/* Ｔブルー輝度下げ#9cd8d2 */
    border-radius: 40px; /* 角を丸くする */
}
.box104 p {
    margin: 0; 
    padding: 0;
}

a {
  color: #666666;
  text-decoration: none;
}

a:visited {
  color: #666666;
}

a:hover {
  text-decoration: none;
}



/* ページの外枠指定 sanpocenter 薄いＴブルー背景#e1f7f4　Ｔブルー#81d8d0 */
.box105{
    border: solid 5px #ffffff;/* 枠線白 */
    padding: 20px;
    width: 80%;
    color: #666666;/* 灰色 */
    background: #e1f7f4;/* 薄いＴブルー背景#e1f7f4 */
    border-radius: 40px; /* 角を丸くする */
}
.box105 p {
    margin: 0; 
    padding: 0;
}

a {
  color: #666666;
  text-decoration: none;
}

a:visited {
  color: #666666;
}

a:hover {
  text-decoration: none;
}



/* ページの外枠指定 診療所nohc 薄い黄緑色#c8f7c8 */
.box106{
    border: solid 5px #ffffff;/* 枠線白 */
    padding: 30px;
    width: 80%;
    color: #666666;/* 灰色 */
    background: #c8f7c8;/* 薄い黄緑色 */
    border-radius: 40px; /* 角を丸くする */
}
.box106 p {
    margin: 0; 
    padding: 0;
}

a {
  color: #666666;
  text-decoration: none;
}

a:visited {
  color: #666666;
}

a:hover {
  text-decoration: none;
}

/* ページの外枠指定 社団nohl.or.jp （旧版）薄い草色#dfedda */
.box107{
    border: solid 1px #dfedda; /* 薄い草色#dfedda */
    padding: 10px;
    width: 90%;
    color: #666666; /* 灰色#666666 */
    background: #dfedda; /* 薄い草色#dfedda */
    border-radius: 30px; /* 角を丸くする */
}
.box107 p {
    margin: 0; 
    padding: 0;
}

a {
  color: #666666; /* 灰色#666666 */
  text-decoration: none;
}

a:visited {
  color: #666666; /* 灰色#666666 */
}

a:hover {
  text-decoration: none;
}