html{
  font-size: 14px;
}


/*
.medium-zoom-image {
    cursor: zoom-in;
    transition: transform .3s cubic-bezier(.2,0,.2,1);
}
*/

/* 縦2分割 */
.yoko-column {
/*  height: 100vh;*/
  width: 95%;
  text-align: center;
}
@media all and (min-width: 500px) {
  .wrapper {
    display: flex;
  }
}

.cat-blue {
    background:#cef;
  /*background: url(images/cat1.jpg) no-repeat top center;
  background-size: cover;*/
}
.cat-blue2 {
    background:rgb(238, 240, 241);
  /*background: url(images/cat1.jpg) no-repeat top center;
  background-size: cover;*/
}
.cat-red {
  background:#fdc;
  /*background: url(images/cat2.jpg) no-repeat center center;
  background-size: cover;*/
}



/* スマホのときは改行なし */

/* スマホのときは改行なし */
.br-pc,.pc {
	display: none;
}

@media (min-width:768px) {
	.br-pc,.pc {
		display: inline;
	}

}

/* スマホのときは改行あり */
.br-sp,.sp {
	display: none;
}

@media (max-width:768px) {
	.br-sp,.sp {
		display: inline;
	}

}





.blog-main .h4{
    font-size: 1.4rem;
}

.twitter-tweet,.twitter-tweet img{
  width:100%;
  max-width: 500px;
  margin-bottom: 30px;
}
.twitter-tweet img{
  width:100%;
  max-width: 500px;
}
.twitter-tweet iframe{
  max-height: 500px;
  padding-bottom: 30px;
}
@media screen and (max-width: 400px) {
  .twitter-tweet,.twitter-tweet img{
    max-width: 400px;
    width:90%;
  }
  .twitter-tweet iframe{
    max-height: 300px;
    padding-bottom: 30px;
  }

}

.txt-right {
  text-align: right;
}
.txt-center {
  text-align: center;
}


.bold {
  font-weight: bold;
}

.light {
  font-size: 90%;
  line-height: 1.5;
}

.small {
  font-size: 80%;
}


.big {
  font-size: 110%;
}


.t2 {
  margin-top: 3.5rem !important;
}

.mkYL { background: linear-gradient(rgba(255, 255, 255, 0) 40%, #F7FD9B 70%); }
.mkPN { background: linear-gradient(rgba(255, 255, 255, 0) 40%, #FBD4E6 70%); }
.mkGR { background: linear-gradient(rgba(255, 255, 255, 0) 40%, #B5F8D9 70%); }
.mkBL { background: linear-gradient(rgba(255, 255, 255, 0) 40%, #BFE1FC 70%); }

.keiko_yellow {
    background: linear-gradient(transparent 80%,#fff070 50%);
    font-weight: bold;
}
.keiko_red {
    background: linear-gradient(transparent 80%,#ff7070 10%);
    font-weight: bold;
}


.red {
    color: #ff0000 !important;
}
.blue {
    color: #3388dd !important;
}


.nami_blue {
    text-decoration: underline #3388dd wavy;
	text-underline-offset: 0.6rem;
}
.nami_red {
    text-decoration: underline #ff7070 wavy;
	text-underline-offset: 0.6rem;
}


.boder-black {
    border-bottom: 2px solid #000;
}
.boder-blue {
    border-bottom: 2px solid #3388dd;
}
.boder-red {
    border-bottom: 2px solid #ff7070;
}

.lbBL {
  display: inline-block;
  padding: 0.2em .8em;
  border-radius: 10px;
  text-decoration: none;
  color: #ffffff;
  background: #3388dd;
  font-weight: bold;
}
.lbGL {
  display: inline-block;
  padding: 0.2em .8em;
  border-radius: 10px;
  text-decoration: none;
  color: #ffffff;
  background: #9ba2a9;
  font-weight: bold;
}



.linkout:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: .8rem;
    content: "\f35d";
    margin: 0 0 0 5px;
    color: #007bff;
}



.pdf-umekomi {
position: relative;
width: 100%;
padding: 56% 0 0 0;
}

.pdf-umekomi iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.content-body{
    color: #333;
    font-size: 1.2rem;
    font-family: 'Open Sans','Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif ;
}
emozi{font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;}

.content-body h1 a,
.content-body h2 a,
.content-body h3 a,
.content-body h4 a,
.content-body h5 a,
.content-body h6 a,
.content-body h7 a{
    display: block;
    text-decoration: none;
}

/* 真ん中だけ下線 */
.content-body h1 {
  position: relative;
  padding: 2rem 0;
  margin: 5rem -20px 3rem -20px;
  text-align: center;
  font-size: 1.4rem;
  background: #f9f9fc;
}

.content-body h1:before {
  position: absolute;
  bottom: 0rem;
  left: calc(50% - 100px);
  width: 200px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #a7d9eb;
}



/* ボックス */
.content-body h2 {
  margin: 4rem -20px 3rem -20px;
  padding: 1rem 1rem;
  /*border: 1px solid #a7d9eb;*/
  border-radius: 2px;
  background: #e1eef2;
  font-size: 1.3rem;
}
@media screen and (max-width: 559px) {
  .content-body h2,.content-body h1 {
    margin: 5rem auto;
     display: block;
  }
}


/* 下線 */
.content-body h3 {
  margin: 4rem 0;
  border-bottom: 3px solid #0a2564;
  font-size: 1.2rem;
}


/* >>アイコン */
.content-body h4 {
  position: relative;
  /*display: inline-block;*/
  margin: 4rem 0;
  padding: 1rem 2.2rem;
  /*text-align: center;*/
  font-size: 1.2rem;
  border-radius: 10px;
  background: #e1eef2;
  box-shadow: 0px 5px 3px -3px rgba(0, 0, 0, 0.235);
}

.content-body h4:before {
  font-family: 'Font Awesome 5 Free';
  line-height: 1;
  position: absolute;
  top: calc(50% - .5em);
  color: #3388dd;
  left: 0;
  content: '\f101';
}



/* 左線 */
.content-body h5 {
  margin: 2rem 0;
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #3388dd;/*左線*/
  font-size: 1.2rem;
}


/* 丸付き>アイコン */
.content-body h6 {
  position: relative;
  display: inline-block;
  font-size: 1.125rem;
  margin: 2rem 0;
  padding: 0 1.5rem;
  text-align: center;
}

.content-body h6:before {
  font-family: 'Font Awesome 5 Free';
  line-height: 1;
  position: absolute;
  top: calc(50% - .5em);
  color: #3388dd;
  left: 0;
  content: '\f138';
}

/* 下線 */
.content-body h7 {
  display: block;
  margin: 4rem 0;
  border-bottom: 1px solid #0a2564;
  font-size: 1.2rem;
  font-weight: bold;
}




/* 目次 */
.toc{

}
/*
#main-toc{
    position: relative;
    display: block;
    text-decoration: none;
    color: #666;
    font-weight: bold;
    margin: 2rem 0;
    padding: 0 1.5rem;
    background: #eaf5f9;
  }

#main-toc:before {
  font-family: 'Font Awesome 5 Free';
  line-height: 1;
  position: absolute;
  top: calc(50% - .5em);
  color: #27acd9;
  left: 0;
  content: '\f0ca';
}
*/
#main-toc{display: none;}



.toc-0 a,
.toc-1 a,
.toc-2 a,
.toc-3 a,
.toc-4 a,
.toc-5 a {
    display: block;
    text-decoration: none;
    color: #5a5a5a;
    font-size: 1rem;
    list-style-type: disc;
  }

.toc-0 a:hover,
.toc-1 a:hover,
.toc-2 a:hover,
.toc-3 a:hover,
.toc-4 a:hover,
.toc-5 a:hover {
    display: block;
  background: #f9f9fc;
    text-decoration: none;
    color: #000;
  }


.toc-0{
    margin: 0.5rem 0; 
    font-weight: bold;
}

.toc-1{
    margin: 0.5rem 0 0.5rem 1.5rem; 
    font-weight: bold;
}

.toc-2{
  margin: 0.5rem 0 0.5rem 2rem; 
}

.toc-3{
  margin: 0.5rem 0 0.5rem 2.5rem; 
}

.toc-4{
  margin: 0.5rem 0 0.5rem 3rem; 
}

.toc-5{
  margin: 0.5rem 0 0.5rem 3.5rem; 
}




/*大学ノート風目次*/
.toc {
    position: relative;    
    margin: 3rem 0;
    width: 95%;
    display: inline-block;
    background: #fff;
    padding: 1em 1em 1.2em 1em;
    border-top: 1px solid #d9d9d9;
    border-right: 0;
    border-bottom: 1px solid #d9d9d9;
    border-left: 28px solid #a7d9eb;/*アクセントカラー*/
    box-shadow: 1px 0 0 #959595d4, 2px 0 0 #fff, 3px 0 0 #898989de, 4px 0 0 #fff, 5px 0 0 #858585de, 9px 3px 10px #ababab96;
}
.toc::before {
    content: "目次";
    position: static;
    display: block;
    text-align: start;
    font-size: 120%;
    top: -30px;
    left: 10px;
    margin: 0 0 .8em;
    font-weight: normal;
    border-bottom: 5px solid #a7d9eb;
}
.toc::after {
    content: "TABLE OF CONTENT";
    position: absolute;
    display: block;
    transform: rotate(-90deg);
    transform-origin: top left;
    bottom: -20px;
    left: -27px;
    font-size: 80%;
    color: #ffffff;
}
.toc a {
    color: #5a5a5a;
    display: block;
    text-decoration: none;
    background: linear-gradient(transparent 0, transparent 93%, #d8d8d8 100%);
    background-size: 100% 2em;
    line-height: 2em;
}







/* アイコン付き */
p.microphone, p.pdf, p.page,p.dwnzip,p.zip, p.mp3,p.mp4 ,p.jpeg ,p.xls ,p.file,p.img{
    position:relative;
    line-height:2em;
    padding-left:3em;
}


p.microphone:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-microphone.png) no-repeat;
    background-size:contain;
}

p.page:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-doc.png) no-repeat;
    background-size:contain;
}

p.pdf:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-pdf.png) no-repeat;
    background-size:contain;
}

p.dwnzip:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-dwnzip.jpg) no-repeat;
    background-size:contain;
}
p.zip:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-zip.png) no-repeat;
    background-size:contain;
}

p.mp3:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-mp3.png) no-repeat;
    background-size:contain;
}

p.mp4:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-mp4.png) no-repeat;
    background-size:contain;
}

p.jpeg:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-jpg.png) no-repeat;
    background-size:contain;
}

p.xls:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-xls.png) no-repeat;
    background-size:contain;
}

p.file:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-txt.png) no-repeat;
    background-size:contain;
}
p.img:before{
    position:absolute;
    left:0;
    content:"";
    display:inline-block;
    width:2em;
    height:2em;
    background:url(./images/icon-image.png) no-repeat;
    background-size:contain;
}



/* 飾り用*/
.content-body .qoute {
    margin: 15px 0;
    padding: 15px 25px;
    background: #f7f8fa;
    border-radius: 10px;
    display: block;
    overflow-wrap: break-word;
    position: relative;
    line-height: 1.7;
}


/* 枠 */
img.photowaku {
    border: 2px solid #3a1624;
    max-width: 96%;
    margin: 20px auto 30px auto;
}

img.waku2 {
	/* border: 2px solid #3a1624; */
	border: 1px solid #f2f2f2;
	border-radius: 4px;
	max-width: 96%;
	margin: 20px auto 30px auto;
}

img.waku {
  	border: 1px solid #f2f2f2;
    margin: 20px auto 30px auto;
	box-shadow: rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
	-webkit-box-shadow: rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
	-moz-box-shadow: rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
}





/* 動画埋め込み */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}



.video-container iframe, .video-container video, .video-container a, .video-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 98%;
    height: 98%;
    background-color: #363636;
    background-image: -moz-linear-gradient(top, #444444, #222222);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
    background-image: -webkit-linear-gradient(top, #444444, #222222);
    background-image: -o-linear-gradient(top, #444444, #222222);
    background-image: linear-gradient(to bottom, #444444, #222222);
    background-repeat: repeat-x;
    border: 5px solid #cccccc;
    border-color: #222222 #222222 #000000;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.video-container {
  margin: 2rem 0 3rem 0;
}

.youtube_short {
	width: 70%;     /* 伸縮する横幅 */
	max-width: 400px;     /* 最大の横幅 */
	margin: auto;     /* 画面の中央に配置 */
	overflow: hidden;
}

.youtube_short iframe {
	aspect-ratio: 9 / 16;
	width: 98%;
	height: 98%;
	background-color: #363636;
	background-image: -moz-linear-gradient(top, #444444, #222222);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
	background-image: -webkit-linear-gradient(top, #444444, #222222);
	background-image: -o-linear-gradient(top, #444444, #222222);
	background-image: linear-gradient(to bottom, #444444, #222222);
	background-repeat: repeat-x;
	border: 5px solid #cccccc;
	border-color: #222222 #222222 #000000;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}




/* まとめとかボックス */
div.summary {
    margin: 50px 0;
}

div.summary div.title {
    padding: 15px 20px;
    background-color: #EEEEF1;
    border-width: 2px;
    border-style: solid;
    border-color: #CCC;
    border-radius: 10px 10px 0 0;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
}

div.summary div.content {
    padding: 30px 30px 30px 30px;
    border-width: 0 2px 2px 2px;
    border-style: solid;
    border-color: #CCC;
    border-radius: 0 0 10px 10px;
    text-align: justify;
    line-height: 1.75;
}








/* slide-box */
.slide-box {
  display: flex;
  width: 100%;
  padding-bottom: 10px;
  overflow-x: scroll;
}
 
.slide-box div {
  width: 90%;
  margin: 5px;
  flex-shrink: 0;
}

.slide-box::-webkit-scrollbar {
  height: 14px; /* スクロールバーの高さ */
}
 
.slide-box::-webkit-scrollbar-thumb {
  background: #3388dd; /* ツマミの色 */
  border-radius: 7px; /* ツマミ両端の丸み */
}
 
.slide-box::-webkit-scrollbar-track {
  background: #a7d9eb; /* トラックの色 */
  border-radius: 7px; /* トラック両端の丸み */
}
@media screen and (max-width:768px) { 
.slide-box {
   display: -webkit-box;
   overflow-x: scroll!important;
   width: 95%;
  white-space: nowrap; 
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
}

}





.scroll_content { /* リスト全体のスタイル */
  display: flex;
  width: 100%;
  margin: auto;
  overflow-x: auto;
}
 
.scroll_content li { /* 各リストのスタイル */
  width: 90%;
  padding: 8px;
  margin: 3px;
  flex-shrink: 0;
  list-style: none;
}
 
.scroll_content img { /* 画像のスタイル */
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}
 
.scroll_content::-webkit-scrollbar {
  height: 12px; /* スクロールバーの高さ */
}
 
.scroll_content::-webkit-scrollbar-thumb {
  background: #3388dd; /* ツマミの色 */
  border-radius: 6px; /* ツマミ両端の丸み */
}
 
.scroll_content::-webkit-scrollbar-track {
  background: #a7d9eb; /* トラックの色 */
  border-radius: 6px; /* トラック両端の丸み */
}
 
 
@media screen and (min-width: 450px) {
  .scroll_content li {
    width: 65%;
  }

}





.dl-teigi1{
  margin: 20px auto;
}
.dl-teigi1 dl {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.dl-teigi1 dt {
flex-basis: 15%;
padding: 10px;
background-color: #f1f1f1;
border-bottom: 1px solid #ccc;
}
.dl-teigi1 dd {
flex-basis: 85%;
padding: 10px;
background-color: #fff;
border-bottom: 1px solid #ccc;
margin-bottom: 0;
}

.dl-teigi1 dt:first-child,
.dl-teigi1 dt:first-child + dd{
  border-top: 1px solid #ccc;
}
@media screen and (max-width: 559px) {
  .dl-teigi1 dl {
  flex-flow: column;
  flex-basis: 100%;
  background-color: #ccc;
  }
}