@charset "utf-8";


a:hover {
color: #8a867e;/*マウスオン時のテキストの色*/
}

/*見出し、h１～ｈ６（ｈ２～ｈ6からコピーして作成済み）
---------------------------------------------------------------------------*/

h2 {
position: relative;
margin-bottom: 40px;
padding: 0 0 0 0;/* 上 右 下 左 思う。見出しそのものが移動する。見出しの文字の上の余白も0にした */
font-size:15pt;
font-weight: bold;
letter-spacing: 0.08em;/* 見出しの文字と文字の間隔を少し広げる */
}

h2:after {
content: "";
display: block;
height: 5px;
width:90%;/* 線の長さ、％で指定 */
background: linear-gradient(to right, rgb(210,105,30), transparent);
border-radius: 30% 50% 50% 30%;/* 左上 右上 右下 左下 見出しの線の最後を細くした */
margin: -10px 0 0 0;/* ここの設定で線の上の文字との余白調整可能 */
}

h3 {
position: relative;
margin-bottom: 40px;
padding: 0 0 0 0;/* 上 右 下 左 思う。見出しそのものが移動する。見出しの文字の上の余白も0にした */
font-size:15pt;
font-weight: bold;
letter-spacing: 0.08em;/* 見出しの文字と文字の間隔を少し広げる */
}

h3:after {
content: "";
display: block;
height: 5px;
width:90%;/* 線の長さ、％で指定 */
background: linear-gradient(to right, rgb(210,105,30), transparent);
border-radius: 30% 50% 50% 30%;/* 左上 右上 右下 左下 見出しの線の最後を細くした */
margin: -10px 0 0 0;/* ここの設定で線の上の文字との余白調整可能 */
}

h4 {
position: relative;
margin-bottom: 40px;
padding: 0 0 0 0;/* 上 右 下 左 思う。見出しそのものが移動する。見出しの文字の上の余白も0にした */
font-size:15pt;
font-weight: bold;
letter-spacing: 0.08em;/* 見出しの文字と文字の間隔を少し広げる */
}

h4:after {
content: "";
display: block;
height: 5px;
width:90%;/* 線の長さ、％で指定 */
background: linear-gradient(to right, rgb(210,105,30), transparent);
border-radius: 30% 50% 50% 30%;/* 左上 右上 右下 左下 見出しの線の最後を細くした */
margin: -10px 0 0 0;/* ここの設定で線の上の文字との余白調整可能 */
}

h5 {
position: relative;
margin-bottom: 40px;
padding: 0 0 0 0;/* 上 右 下 左 思う。見出しそのものが移動する。見出しの文字の上の余白も0にした */
font-size:15pt;
font-weight: bold;
letter-spacing: 0.08em;/* 見出しの文字と文字の間隔を少し広げる */
}

h5:after {
content: "";
display: block;
height: 5px;
width:90%;/* 線の長さ、％で指定 */
background: linear-gradient(to right, rgb(210,105,30), transparent);
border-radius: 30% 50% 50% 30%;/* 左上 右上 右下 左下 見出しの線の最後を細くした */
margin: -10px 0 0 0;/* ここの設定で線の上の文字との余白調整可能 */
}

h6 {
position: relative;
margin-bottom: 40px;
padding: 0 0 0 0;/* 上 右 下 左 思う。見出しそのものが移動する。見出しの文字の上の余白も0にした */
font-size:15pt;
font-weight: bold;
letter-spacing: 0.08em;/* 見出しの文字と文字の間隔を少し広げる */
}

h6:after {
content: "";
display: block;
height: 5px;
width:90%;/* 線の長さ、％で指定 */
background: linear-gradient(to right, rgb(210,105,30), transparent);
border-radius: 30% 50% 50% 30%;/* 左上 右上 右下 左下 見出しの線の最後を細くした */
margin: -10px 0 0 0;/* ここの設定で線の上の文字との余白調整可能 */
}


/*Worksページ
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
#main .list {
width: 16%;/*幅*/
float: left;/*左に回り込み*/
text-align: center;/*ボックス内をセンタリング*/
margin-left: 3%;/*ボックスの外（左）にあけるスペース*/
margin-bottom: 20px;/*ボックスの外（下）にあけるスペース*/
}

/*ボックス内の画像*/
#main .list figure img {
border-radius: 200px;/*角丸のサイズ。適当に大きめに設定しておけばOK。*/
}

/*ボックス内のh3タグ*/
#main .list h3 {
font-weight: normal;/*hタグのデフォルトの太字を標準に*/
font-size: 11px;/*文字サイズ*/
padding: 0px 10px;/*上下・左右への余白*/
}

/*マウスオン時*/
#menubar li a:hover {
letter-spacing: 0.3em;
}

/*日本語の小文字部分の設定（span）のマウスオン時*/
#menubar li a:hover span {
opacity: 1;/*透明度を100%にする。つまり通常表示になる。*/
}

/*フッター設定
---------------------------------------------------------------------------*/
footer {
clear: both;
width: 100%;
padding: 20px 0;
text-align: center;
color: #fff;
}

footer a {
text-decoration: none;
color: #fff;
letter-spacing: 0.1em;
}

footer .pr {
display: block;
}

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#new dl{
padding-left: 20px;
margin-bottom: 20px;
height: 140px;/*高さ。これを超えるとスクロールバーが出てiframe風になる。全部表示させておきたいならこの行と下の１行を削除。*/
overflow: auto;
}

/*日付設定*/
#new dt {
font-weight: bold;/*太字にする設定。標準がいいならこの行削除。*/
float: left;
width: 8em;
}

/*記事設定*/
#new dd {
padding-left: 8em;
}

/*テーブル ta1
---------------------------------------------------------------------------*/
/*ta1設定*/
.ta1 {
width: 100%;
margin-bottom: 20px;
color: #fff;/*文字色*/
}

.ta1, .ta1 td, .ta1 th {
padding: 10px;/*ボックス内の余白*/
word-break: break-all;
}

/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi {
width: auto;
text-align: center;
}

/*ta1の左側ボックス*/
.ta1 th {
width: 140px;/*幅*/
text-align: center;/*センタリング*/
font-weight: normal;
text-align: right;/*文字を右寄せ*/
}

/*ta1内で使うinput,textarea,selectタグの設定*/
.ta1 input,.ta1 textarea,.ta1 select {
border: 1px solid #fff;/*枠線の幅、線種、色*/
border-radius: 10px;/*角丸のサイズ*/
background: #fff;/*背景色（古いブラウザ用）*/
background: rgba(255,255,255,0.5);/*背景色。255,255,255は白の事で0.5が透明度50%の事。*/
padding: 10px;
}

/*テーブル ta2
---------------------------------------------------------------------------*/
/*ta2設定*/
.ta2 {
width: 100%;
margin-bottom: 15px;
background: #fff;/*背景色*/
}

.ta2, .ta2 td, .ta2 th {
border: 1px solid #ccc;/*テーブルの枠線の幅、線種、色*/
padding: 10px;/*ボックス内の余白*/
word-break: break-all;
}

/*テーブル１行目に入った見出し部分*/
.ta2 th.tamidashi {
width: auto;
text-align: left;/*左よせ*/
background: #e5eef3;/*背景色*/
}

/*ta2の左側ボックス*/
.ta2 th {
width: 140px;/*幅*/
text-align: center;/*センタリング*/
}

/*画像*/
.ta2 img {
vertical-align: bottom;
}

/*PAGE TOP設定
---------------------------------------------------------------------------*/
#pagetop {
clear: both;
}

#pagetop a {
font-size: 20px;/*文字サイズ*/
text-decoration: none;
display: block;
float: right;
background: #8a867e;/*背景色*/
color: #fff;/*文字色*/
width: 50px;/*幅*/
line-height: 50px;/*高さ*/
text-align: center;
border-radius: 50%;
margin: 50px;
}

/*マウスオン時*/
#pagetop a:hover {
opacity: 0.7;/*透明度70%*/
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
background: #F00;/*背景色*/
color: #FFF;/*文字色*/
font-size: 70%;
line-height: 1.5;
padding: 0 5px;
border-radius: 2px;
margin: 0px 5px;
display: inline-block;
vertical-align: text-top
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #dcdcdc;background:rgba(0,0,0,0.15);display:inline-block;padding:0px 5px;border-radius: 4px;color: #fff;}
.mb15,.mb1em {margin-bottom: 15px;}
.mb50 {margin-bottom: 50px;}
.clear {clear: both;}
ul.disc {padding: 0em 25px 1em;list-style: disc;}
.color1 {color: #e64875;}

/*一番下のテンプレートパーティさんの案内の箇所
---------------------------------------------------------------------------*/
.pr {
font-size: 10px;
line-height: 0.5;
}

.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
img.fr {float: right;margin-left: 10px;margin-bottom: 10px;}
img.fl {float: left;margin-right: 10px;margin-bottom: 10px;}
.big1 {font-size: 30px;letter-spacing: 0.2em;}
.mini1 {font-size: 11px;}


/* --------------------------------------
↓ココロの設定開始地点
--------------------------------------- */
 
table {
margin-left:auto;margin-right:auto;
}

td {
text-align: center;
vertical-align: middle;
}

/* --------------------------------------
引用のCSS
--------------------------------------- */
blockquote {
position: relative;
padding: 17px 17px 17px 17px;
box-sizing: border-box;
font-style: italic;
color: #464646;
border: solid 2px #D2691E;
margin-left: -15px;
margin-right: -15px;
}

blockquote:before{
display: inline-block;
position: absolute;
top: -22.5px;
left: -20px;
width:40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
content: "\f10d";
font-family: "Font Awesome 5 Free";
background: transparent;
color: #D2691E;
font-size: 22px;
font-weight: 900;
}

blockquote:after{
display: inline-block;
position: absolute;
bottom: -23px;
right: -20px;
width:40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
content: "\f10e";
font-family: "Font Awesome 5 Free";
background: transparent;;
color: #D2691E;
font-size: 22px;
font-weight: 900;
}

blockquote p {
padding: 0;
margin: 10px 0;
line-height: 1.7;
}

blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}

.cocenter {
text-align:center;
}

.cocoro1 {
margin-bottom: 10px;
}

.cocoro2 {
margin-bottom: 20px;
}

.cocoro3 {
margin-bottom: 30px;
}

.cocoro4 {
margin-bottom: 40px;
}

.cocoro5 {
margin-bottom: 50px;
}

.cocoro6 {
margin-bottom: 60px;
}

.cocoro7 {
margin-bottom: 70px;
}

.cocoro8 {
margin-bottom: 80px;
}

.cocoro17 {
margin-bottom: 170px;
}

.cocoroli {
font-size:13.5pt;
}

.coimg {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
outline: solid 1px #FF9900;
}

.coimgright {
display: block;
margin-right: 0;
margin-left: auto;
}

.coimgleft {
display: block;
margin-left: 0;
margin-right: auto;
}

.coimg17 {
text-align: center;
margin-bottom: 170px;
}

.coimgcenter {
display: block;
margin-top:30px;
margin-left: auto;
margin-right: auto;
}

.coimgcenter2 {
display: block;
margin-top:30px;
margin-left: auto;
margin-right: auto;
outline: solid 1px #1BFF4A;
}

.coimgcenter3 {
display: block;
margin-left: auto;
margin-right: auto;
}

.coimglink {
border: 0px;
width: auto;
height: auto;
}

.coimge2linkcenter{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
justify-content: space-evenly;
margin: 0 6px 10px 6px;
}

div > a{
width: calc(100%/2); /*画像を横に3つ並べる場合*/
max-width:100%;/*画像のはみだしを防ぐ*/
height: auto;/*画像の縦横比を維持 */
}

.coimge3linkcenter{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
justify-content: space-around;
}

div > a{
width: calc(100%/3); /*画像を横に3つ並べる場合*/
max-width:100%;/*画像のはみだしを防ぐ*/
height: auto;/*画像の縦横比を維持 */
}

.coimgeshare{
display: flex;
justify-content: flex-end;
flex-direction: row;
gap: 6px 4px; 
}

div > a{
width: calc(100%/3); /*画像を横に3つ並べる場合*/
max-width:100%;/*画像のはみだしを防ぐ*/
height: auto;/*画像の縦横比を維持 */
}

.coimgeshare2{
display: flex;
justify-content: center;
flex-direction: row;
gap: 6px 4px; 
margin-bottom: 40px;
}

div > a{
width: calc(100%/4); /*画像を横に3つ並べる場合*/
max-width:100%;/*画像のはみだしを防ぐ*/
height: auto;/*画像の縦横比を維持 */
}

.co10 {
font-size:10pt;
}

.co11 {
font-size:11pt;
}

.co12 {
font-size:12pt;
}

.co13 {
font-size:13pt;
}

.co14 {
font-size:14pt;
}

.co20 {
font-size:20pt;
}

.com10 {
margin-bottom: 10px;
}

.com20 {
margin-bottom: 20px;
}

.com30 {
margin-bottom: 30px;
}

.com40 {
margin-bottom: 40px;
}

.com60 {
margin-bottom: 60px;
}

.com70 {
margin-bottom: 70px;
}

.com80 {
margin-bottom: 80px;
}

.com85 {
margin-bottom: 85px;
}

.com90 {
margin-bottom: 90px;
}


/* --------------------------------------
ｄｉｖ設定
--------------------------------------- */

.codiv5 {
margin-bottom:5px;
}

.codiv10 {
margin-bottom:10px;
}

.codiv20 {
margin-bottom:20px;
}

.codiv30 {
margin-bottom:30px;
}

.codiv40 {
margin-bottom:40px;
}

.codiv50 {
margin-bottom:50px;
}

.codiv60 {
margin-bottom:60px;
}

.codiv70 {
margin-bottom:70px;
}

.codiv80 {
margin-bottom:80px;
}

.codiv85 {
margin-bottom:85px;
}

.codiv90 {
margin-bottom:90px;
}

.codiv95 {
margin-bottom:95px;
}

.codiv98 {
margin-bottom:98px;
}

.codiv99 {
margin-bottom:99px;
}

.codiv100 {
margin-bottom:100px;
}

.codiv105 {
margin-bottom:105px;
}

.codiv110 {
margin-bottom:110px;
}

.codiv120 {
margin-bottom:120px;
}

.codiv130 {
margin-bottom:130px;
}

.codiv150 {
margin-bottom:150px;
}

.codiv170 {
margin-bottom:170px;
}

.codivcenter {
text-align : center;
margin-bottom: 60px;
}

.codivshare {
text-align : center;
margin: 50px 0 0 0;
}

.codivleft {
text-align : left;
margin-left: 8%;
margin-top: 40px;
}

/* --------------------------------------
↓箇条書きのＣＳＳ
--------------------------------------- */

ul.cp_list {
position: relative;
padding: 0 0.5em;
margin: 0px -14px 0px -14px;/*リストの周りの余白。ネガティブmarginで横枠を広げた*/
list-style-type: none;
border: 2px solid #D2691E;
background: #FFFFEE;
}

ul.cp_list::after {
position: absolute;
content: "LIST";
padding: 1px 7px;
letter-spacing: 0.06em;
font-weight: bold;
font-size: .6em;
background: linear-gradient(rgb(210,105,0.99), transparent);
color: #FFFFFF;
bottom: 100%;
left: -2px;
border-radius: 4px 4px 0px 0px;
}

ul.cp_list li {
line-height: 1.5;
padding: 0.6em 0.7em 0.6em 0.7em; /*リスト内の余白調整*/
border-bottom: 1px dashed #D2691E;
}

ul.cp_list li::before {
position: absolute;
content: ""
}

ul.cp_list li:last-child {
border-bottom: none;
line-height: 1.5;
padding: 0.6em 0.7em 0.6em 0.7em; /*リスト内の余白調整*/
}

/* --------------------------------------
↓ジャンプリスト
-------------------------------------- */

ul.cp_list2 {
position: relative;
padding: 0 0.5em;
margin: 0px -14px 0px -14px;/*リストの周りの余白、ネガティブmarginで横枠ひろげた（同上）*/
list-style-type: none;
border: solid 2px #D2691E;
background: #FFFFEE;
border-radius: 0.67em;
}

ul.cp_list2 li {
line-height: 1.5;
padding: 0.6em 0.7em 0.6em 0.7em; /*リスト内の余白調整*/
border-bottom: 1.5px dashed #D2691E;
}

ul.cp_list2 li::before {
position: absolute;
content: ""
}

ul.cp_list2 li:last-child {
border-bottom: none;
line-height: 1.5;
padding: 0.6em 0.7em 0.6em 0.7em; /*リスト内の余白調整*/
}


/* --------------------------------------
ジャンプリスト横線なしの枠（リストに戻る）
--------------------------------------- */

ul.cp_list3 {
 position: relative;
 padding: 0.5em 0 0.5em 0;
 margin: 10% 10% 10% 10%; /* リスト周りの余白、上、右、下、左 */
 list-style-type: none;
 border-top: solid 6px rgba(68,0,0,0.7);/* 線の種類、太さ、色 */
 border-bottom: solid 6px rgba(68,0,0,0.7);/* 線の種類、太さ、色 */
 border-radius: 15% 7% 15% 7%;/* 左上 右上 右下 左下 */
 text-align: center;
 font-weight: bold;
}

ul.cp_list3 li {
 line-height: 1.5;
 padding: 0.5em 0 0.5em 0;
}

ul.cp_list3 li::before {
 position: absolute;
 content: ""
}

ul.cp_list3 li:last-child {
line-height: 1.5;
padding: 0.5em 0 0.5em 0;
}


/* --------------------------------------
↓とあるココロテキストのポジション
--------------------------------------- */

p.cotest {
position: absolute; top: 15%; 
right:25%;
}


/* --------------------------------------
↓カッテネCSS
--------------------------------------- */

.kattene {
padding: 8% 5% 5% 5%;/*ここで全体の余白*/
margin-bottom: -5em;
box-sizing: border-box; }

.kattene div{
margin: 0;}

.kattene__imgpart {
text-align: center;}

.kattene__imgpart img {
box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);
margin: 0;}

.kattene__description {
font-size: 0.8em;}

.kattene .kattene__btns {
width: 100%;
margin-top: 0.5em;}

.kattene__btns:after {
display: block;
clear: both;
height: 0px;
visibility: hidden;
content: ".";}

.kattene__btns > div {
float: left;
margin-bottom: 5px;}

.kattene__btns .kattene__btn {
width: 100%;
padding-left: 0;
padding-right: 0; }

.kattene__btns.__three > div {
width: 32.66667%; }

.kattene__btns.__three > div:not(:last-child) {
margin-right: 1%; }

.kattene__btns.__two > div {
width: 49.5%; }

.kattene__btns.__two > div:nth-child(odd) {
margin-right: 1%; }

@media screen and (max-width: 900px) {
.kattene__imgpart {
padding-bottom: 1em; }
.kattene .kattene__btns {
margin-top: 0.5em; }
.kattene__btns.__five > div {
width: 49.5%; }
.kattene__btns.__five > div:nth-child(odd) {
margin-right: 1%; }
.kattene__btns.__five > div:last-child {
margin-right: 0;
float: right; }

.kattene__btns.__four > div {
width: 49.5%; }

.kattene__btns.__four > div:nth-child(odd) {
margin-right: 1%; }

.kattene__btns.__one > div {
width: 50%;
margin-left: 25%; } }


@media screen and (min-width: 901px) {


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

.kattene__imgpart {
display: table-cell;
width: 20%;
padding-bottom: 5px;
padding-top: 7%; /*イメージ画像の調整*/
}

.kattene__infopart {
display: table-cell;
vertical-align: top;
position: relative;
padding-left: 5%; /*イメージ画像の左への余白*/
width: 80%; }

.kattene .kattene__description {
margin-bottom: 23%;/*ここで各ボタンの位置だっけ？*/
}

.kattene__btns {
position: absolute;
bottom: 0;
box-sizing: border-box;
padding-right: 6%; }/*緑のボタンの左への余白*/

.kattene__btns.__five > div {
width: 19.2%; }

.kattene__btns.__five > div:not(:last-child) {
margin-right: 1%; }

.kattene__btns.__four > div {
width: 24.25%; }

.kattene__btns.__four > div:not(:last-child) {
margin-right: 1%; }

.kattene__btns.__two > div {
width: 49.5%; }

.kattene__btns.__two > div:not(:last-child) {
margin-right: 1%; }

.kattene__btns.__one > div {
width: 49.5%;
float: right; } }

.kattene .kattene__btn {
appearance: none;
background-color: #54c0d1;
border: 0;
border-radius: 0;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-size: 1em;/*ボタンの中の文字の大きさ*/
font-weight: 600;
line-height: 1;
padding: 0.75em 0; /*ボタンの高さが変わる（非推奨）*/
text-decoration: none;
transition: background-color 150ms ease;
user-select: none;
vertical-align: middle;
white-space: nowrap; }

.kattene__btn:hover, .kattene__btn:focus {
background-color: #439aa7;
color: #fff !important; }

.kattene__btn:disabled {
cursor: not-allowed;
opacity: 0.5; }

.kattene__btn:disabled:hover {
background-color: #54c0d1; }

.kattene__btn.__small {
padding: 0.55em;
font-size: 0.9em; }

.kattene__btn.__orange {
background-color: #FF9901;
box-shadow: 0 5px 0 #cc7a01;
margin-bottom: 5px;
border-radius: 3px;
text-align: center; }

.kattene__btn.__orange:hover {
background-color: #cc7a01; }

.kattene__btn.__orange i {
font-weight: bold; }

.kattene__btn.__orange i:before {
vertical-align: middle;
font-size: 1.2em;
margin-right: 0.2em; }

.kattene__btn.__blue {
background-color: #007dcd;
box-shadow: 0 5px 0 #0064a4;
margin-bottom: 5px;
border-radius: 3px;
text-align: center; }

.kattene__btn.__blue:hover {
background-color: #0064a4; }

.kattene__btn.__blue i {
font-weight: bold; }

.kattene__btn.__blue i:before {
vertical-align: middle;
font-size: 1.2em;
margin-right: 0.2em; }

.kattene__btn.__red {
background-color: #c20004;
box-shadow: 0 5px 0 #9b0003;
margin-bottom: 5px;
border-radius: 3px;
text-align: center; }

.kattene__btn.__red:hover {
background-color: #9b0003; }

.kattene__btn.__red i {
font-weight: bold; }

.kattene__btn.__red i:before {
vertical-align: middle;
font-size: 1.2em;
margin-right: 0.2em; }

.kattene__btn.__green {
background-color: #0BBD80;
box-shadow: 0 5px 0 #099766;
margin-bottom: 5px;
border-radius: 3px;
text-align: center; }

.kattene__btn.__green:hover {
background-color: #099766; }

.kattene__btn.__green i {
font-weight: bold; }

.kattene__btn.__green i:before {
vertical-align: middle;
font-size: 1.2em;
margin-right: 0.2em; }

.kattene__btn.__pink {
background-color: #e1325b;
box-shadow: 0 5px 0 #b42849;
margin-bottom: 5px;
border-radius: 3px;
text-align: center; }

.kattene__btn.__pink:hover {
background-color: #b42849; }

.kattene__btn.__pink i {
font-weight: bold; }

.kattene__btn.__pink i:before {
vertical-align: middle;
font-size: 1.2em;
margin-right: 0.2em; }

/* --------------------------------------
span CSS
--------------------------------------- */

.cospan {
text-decoration: underline;
text-decoration-color:#0000ff;
}

.cospancenter {
 text-align: center;
 font-size: 21pt;
 font-weight: bold;
}

.cospansmall { 
 font-size:9pt;
 margin-bottom:20px;
}

/* --------------------------------------
リンク関係
--------------------------------------- */

.colink {
border-bottom: 1px solid #0000FF; /*下線の幅、線種、色*/
}

.colink2 {
border-bottom: 1px dashed #0000FF; /*下線の幅、線種、色*/
}


/* --------------------------------------
コピーボタン
--------------------------------------- */

.hidden{
position: relative;
opacity:0;
z-index:-5;
}

button:focus{
outline: 0;
}

.textlines {
border: 2px solid #440000;/* 枠線 */
border-radius: 0.67em; /* 角丸 */
padding: 40px 20px 20px 20px;/* 内側の余白量 */
background: #FFFFEE;
}

.negative {
margin: -10px -15px 60px -15px;
}

.negative2 {
margin-bottom: -50px;
}

.negative3 {
margin: -30px 0 0px;
}

.negative4 {
margin: 0 0 0 4%;
}


/* --------------------------------------
コピーボタンのデザイン
--------------------------------------- */

.btn-flat-border {
display: inline-block;
text-decoration: none;
color: #67c5ff;
border: solid 2px #67c5ff;
border-radius: 3px;
transition: .4s;
background-color: rgba(255,255,255,0.7); 
font-weight: bold;
padding:0% 2% 0% 2%;
font-size:11pt;
}

.btn-flat-border:hover {
background: #67c5ff;
color: white;
}

.btn-right {
 display: block;
 margin-right: 1%;
 margin-left: auto;
 margin-bottom: 1%;
}

/* --------------------------------------
備忘録のためのCSS
--------------------------------------- */

.comemo1 {
 display: block;
 outline: solid 1px #1BFF4A;
}

.comemo2 {
 margin-left: auto;
 margin-right: auto;
}


/* --------------------------------------
シェアボタン改
--------------------------------------- */

/* アイコン周り全体 */
.flowbtn15{
font-family:'Arial',sans-serif;
display:inline-block;
position:relative;
width:70%;
height:50px;
font-size:23px;
border-radius:5px;
color:#fff!important;
text-decoration:none;
top:60px;
}

.flowbtn15 i{
position:relative;
bottom:5px;
top:-11px;
}

/* Twitter */
.fl_tw1{
background:#55acee;
}

/* Instagramアイコン位置 */
.insta_btn15 .fa-instagram{
font-size:28px;
}

/* Instagram紫グラデ背景色 */
.insta_btn15{
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
overflow:hidden;
}

/* Instagramオレンジグラデ背景色 */
.insta_btn15:before{
content: '';
position:absolute;
top:27px;
left:-75px;
width:100%;
height:100%;
background:-webkit-radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 45%, rgba(255, 88, 96, 0) 80%);
background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 80%);
}

/* Facebook */
.fl_fb1{
background:#3b5998;
}

/* LINE */
.fl_li1{
background:#00c300;
}

/* アイコンボタンホバー時 */
.flowbtn15:hover{
text-decoration:none;
opacity:.8;
}

/* ボタン内テキスト調整 */
.flowbtn15 div{
font-size:16px;
position:relative;
bottom:39px;/* ボタン内の文字を上に */
}

/* ulタグの内側余白を０にする */
ul.snsbtniti2{
padding:0!important;
}

/* アイコンボタンの位置調整 */
.snsbtniti2{
display:flex;
justify-content: center;
flex-flow:row wrap;
}

/* アイコンボタン同士の余白調整 */
.snsbtniti2 li{
flex:0 0 48%;
text-align:center!important;
}


/* --------------------------------------
インスタグラム単体とあるココロ
--------------------------------------- */

.insta_btn3{/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 50px;/*高さ*/
  width: 500px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 25px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  background: rgb(101,251,63);
  background: radial-gradient(circle, rgba(101,251,63,0.7987570028011204) 50%, rgba(245,252,70,1) 100%);
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
  margin: 0 auto 0 auto;
 }

.insta_btn3:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: rgb(101,251,63);
  background: radial-gradient(circle, rgba(101,251,63,0.7987570028011204) 50%, rgba(245,252,70,1) 100%);
}

.insta_btn3 .fa-instagram{/*アイコン*/
  font-size: 35px;/*アイコンサイズ*/
  position: relative;
  top: 4px;/*アイコン位置の微調整*/
}

.insta_btn3 span {/*テキスト*/
  display:inline-block;
  position: relative;
  transition: .5s
}

.insta_btn3:hover span{/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

/* --------------------------------------
上下左右中央揃え
--------------------------------------- */

.updownleftrightcenter{
display: flex;
align-items: center;
}

/* --------------------------------------
上下左右中央揃え
--------------------------------------- */


/*! * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */ .fa,.fab,.fad,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;line-height:1}.fa-facebook-f:before{content:"\f39e"}.fa-instagram:before{content:"\f16d"}.fa-lightbulb:before{content:"\f0eb"}.fa-line:before{content:"\f3c0"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-quote-left:before {content: "\f10d"}.fa-quote-right:before {content: "\f10e"}.fa-uber:before{content:"\f402"}.fa-ubuntu:before{content:"\f7df"}.fa-uikit:before{content:"\f403"}.fa-umbraco:before{content:"\f8e8"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-uncharted:before{content:"\e084"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-uniregistry:before{content:"\f404"}.fa-unity:before{content:"\e049"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-unsplash:before{content:"\e07c"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-ups:before{content:"\f7e0"}.fa-usb:before{content:"\f287"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-injured:before{content:"\f728"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-nurse:before{content:"\f82f"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before{content:"\f509"}.fa-users-slash:before{content:"\e073"}.fa-usps:before{content:"\f7e1"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-vaadin:before{content:"\f408"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-vest:before{content:"\e085"}.fa-vest-patches:before{content:"\e086"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vihara:before{content:"\f6a7"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-virus:before{content:"\e074"}.fa-virus-slash:before{content:"\e075"}.fa-viruses:before{content:"\e076"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-voicemail:before{content:"\f897"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume-down:before{content:"\f027"}.fa-volume-mute:before{content:"\f6a9"}.fa-volume-off:before{content:"\f026"}.fa-volume-up:before{content:"\f028"}.fa-vote-yea:before{content:"\f772"}.fa-vr-cardboard:before{content:"\f729"}.fa-vuejs:before{content:"\f41f"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-warehouse:before{content:"\f494"}.fa-watchman-monitoring:before{content:"\e087"}.fa-water:before{content:"\f773"}.fa-wave-square:before{content:"\f83e"}.fa-waze:before{content:"\f83f"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheelchair:before{content:"\f193"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wikipedia-w:before{content:"\f266"}.fa-wind:before{content:"\f72e"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-wine-bottle:before{content:"\f72f"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-wodu:before{content:"\e088"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wpressr:before{content:"\f3e4"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yammer:before{content:"\f840"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yarn:before{content:"\f7e3"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yin-yang:before{content:"\f6ad"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.fa-zhihu:before{content:"\f63f"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../fonts/webfonts/fa-brands-400.eot);src:url(../fonts/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../fonts/webfonts/fa-brands-400.woff2) format("woff2"),url(../fonts/webfonts/fa-brands-400.woff) format("woff"),url(../fonts/webfonts/fa-brands-400.ttf) format("truetype"),url(../fonts/webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;src:url(../fonts/webfonts/fa-regular-400.eot);src:url(../fonts/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../fonts/webfonts/fa-regular-400.woff2) format("woff2"),url(../fonts/webfonts/fa-regular-400.woff) format("woff"),url(../fonts/webfonts/fa-regular-400.ttf) format("truetype"),url(../fonts/webfonts/fa-regular-400.svg#fontawesome) format("svg")}.fab,.far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:block;src:url(../fonts/webfonts/fa-solid-900.eot);src:url(../fonts/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../fonts/webfonts/fa-solid-900.woff2) format("woff2"),url(../fonts/webfonts/fa-solid-900.woff) format("woff"),url(../fonts/webfonts/fa-solid-900.ttf) format("truetype"),url(../fonts/webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900}