/* */ @charset "UTF-8";@import"https://fonts.googleapis.com/css?family=Lato";/*! normalize.css v3.0.0 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.clearfix{display:block;*zoom: 1}.clearfix:after{display:block;visibility:hidden;font-size:0;height:0;clear:both;content:"."}.inline-block{display:inline-block;*display: inline;*zoom: 1}.border-box{-ms-box-sizing:border-box;box-sizing:border-box}.ellipsis{white-space:nowrap;-webkit-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden}/*! Theme: evergreen Author: Hatena Blog Team Description: 1カラムで文章を書くことに集中できるテーマです Responsive: yes */html,body{font-family:Helvetica Neue,Helvetica,Arial,Hiragino Kaku Gothic Pro,Meiryo,MS PGothic,sans-serif;color:#4d4d4d;background-color:#fff;font-size:16px}a{color:#47a89c;text-decoration:none}a:hover{text-decoration:underline}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover,h1 a:visited,h2 a:visited,h3 a:visited,h4 a:visited,h5 a:visited,h6 a:visited{color:#4d4d4d;text-decoration:none}a.keyword{text-decoration:none;border-bottom:1px dotted #ccc;color:#4d4d4d}#globalheader-container{background:#fff;border-bottom:1px solid #ccc;color:#333;position:sticky;top:0;width:100%}#container{margin:0 auto;padding:0 50px}#container #content{display:block;*zoom: 1}#container #content:after{display:block;visibility:hidden;font-size:0;height:0;clear:both;content:"."}#container-inner{max-width:1000px;margin:40px auto 0;background:#fff;padding-bottom:50px;border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.globalheader-off #container{padding-top:1px}#main{float:none;max-width:800px;margin:0 auto}#blog-title{margin:0 0 70px;padding:90px 0 58px;text-align:center;background:url(https://cdn.blog.st-hatena.com/css/theme/evergreen/images/header.png?version=4f79efacea2badc461d4ddb4cc04a7) no-repeat;background-position:center bottom}#title{margin:0;font-size:313%;font-family:Lato,sans-serif;letter-spacing:.05em;padding:0 20px}#title a{color:#4d4d4d}#blog-description{font-weight:400;font-size:100%;color:#abb4b7;margin:5px 0 0;padding:0 20px}.header-image-enable #blog-title{margin:0 0 70px;padding:0}.header-image-enable #title{padding:55px 20px 0}.header-image-enable #blog-title-inner{-moz-border-radius-topright:3px;-moz-border-radius-topleft:3px;-webkit-border-top-left-radius:3px;-webkit-border-top-right-radius:3px}#top-editarea{max-width:800px;margin:0 auto 40px}#top-box{max-width:800px;margin:0 auto 50px;font-size:100%}.entry{position:relative;margin-bottom:100px;padding:0 0 112px;background:url(https://cdn.blog.st-hatena.com/css/theme/evergreen/images/border.png?version=4f79efacea2badc461d4ddb4cc04a7) no-repeat;background-position:center bottom}.entry.sleeping-ads{padding-bottom:2em}.entry-header{position:relative}.entry-title{margin:0;padding:10px 0 20px;line-height:1.3;font-size:213%;border-bottom:1px solid #ccc}.entry-title a{color:#4d4d4d}.entry-title a:hover{color:#676767}.date{font-size:113%;font-weight:700;font-family:Lato,sans-serif;letter-spacing:.1em;padding:0 0 0 3px}.date a{color:#47a89c;text-decoration:none;font-size:90%}.date-last-updated{color:#47a89c;font-size:90%}.categories{margin:20px 0 0;padding:0 0 0 20px;text-align:left;background:url(https://cdn.blog.st-hatena.com/css/theme/evergreen/images/folder.png?version=4f79efacea2badc461d4ddb4cc04a7) no-repeat;background-position:left 6px;font-size:94%}.categories a{margin:0 4px 0 0}.categories.no-categories{margin:0}.entry-header-menu{position:absolute;top:42px;left:-78px}.entry-header-menu a{background:#b3b3b3;font-size:88%;padding:9px 14px;color:#fff;transition:all .2s ease-out}.entry-header-menu a:hover{text-decoration:none;background:silver;transition:all .2s ease-out}.entry-content{line-height:1.8;font-size:113%;padding:40px 0 0}.entry-content p{margin:0 0 1em}.entry-content img{max-width:100%}.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{margin:1.3em 0 .8em;line-height:1.5}.entry-content h1{font-size:160%;padding:0 0 8px;border-bottom:1px solid #ccc}.entry-content h2{font-size:150%;padding:0 0 8px;border-bottom:1px solid #ccc}.entry-content h3{font-size:140%;margin:25px 0 15px}.entry-content h4{font-size:130%}.entry-content h5{font-size:110%}.entry-content h6{font-size:100%}.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6,.entry-content .footnote-number{scroll-margin-top:56px}.entry-content table{border-collapse:collapse;border-spacing:0;margin-bottom:1em}.entry-content table img{max-width:none}.entry-content table th,.entry-content table td{border:1px solid #ddd;padding:5px 12px}.entry-content table th{background:#f7f7f7}.entry-content hr{border:none;width:70px;border-top:1px solid #ccc;margin:60px auto}.entry-content blockquote{background:#f7f7f7 url(https://cdn.blog.st-hatena.com/css/theme/evergreen/images/quote.png?version=4f79efacea2badc461d4ddb4cc04a7) no-repeat;background-position:40px 25px;margin:0 0 10px;padding:75px 40px 40px;color:gray}.entry-content blockquote p{margin-top:0;margin-bottom:0}.entry-content blockquote a.keyword{color:#999}.entry-content blockquote cite{margin:10px 0 0;display:inline-block;*display: inline;*zoom: 1}.entry-content pre{background:#f7f7f7;margin:0 0 10px;padding:25px;white-space:pre;line-height:1.4;font-size:88%}.entry-content pre>code{margin:0;padding:0;white-space:pre;border:0;background:transparent;font-family:Monaco,Consolas,Courier New,Courier,monospace,sans-serif}.entry-content code{font-size:90%;margin:0 2px;padding:0 5px;border:1px solid #eaeaea;background-color:#f8f8f8;border-radius:3px;font-family:Monaco,Consolas,Courier New,Courier,monospace,sans-serif}.entry-content .hatena-asin-detail{border:none;background:#f7f7f7;color:#4d4d4d;padding:20px}.entry-content .hatena-asin-detail li{line-height:1.4}.entry-footer{margin:50px 0 0}.entry-footer-section{margin:0 0 30px;color:#4d4d4d;font-family:Lato,sans-serif;color:#abb4b7}.entry-footer-section a{color:#47a89c}.entry-footer-section .fn{margin:0 2px 0 0}.social-buttons,.entry-footer-html{margin:20px 0 10px}.hatena-star-container{margin:10px 0 20px}.comment-box ul{list-style:none;margin:50px 0 30px;padding:0;font-size:95%;line-height:1.7}.comment-box li{padding:20px 0 20px 70px;border-bottom:1px solid #ccc;position:relative}.comment-box li:first-child{border-top:1px solid #ccc}.comment-box .read-more-comments{padding-left:0;border-bottom:none}.comment-box .hatena-id-icon{position:absolute;top:20px;left:0;width:50px!important;height:50px!important;border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.comment-user-name{margin:0 0 10px;font-weight:700}.comment-content{font-size:90%;margin:0 0 10px;word-wrap:break-word}.comment-content p{margin:0 0 10px}.comment-metadata{font-size:88%;color:#abb4b7;margin:20px 0 0}.comment-metadata a{color:#999}.comment-delete-button img{top:18px!important}.leave-comment-title{background:#3bb4a5;color:#fff;padding:10px 20px;font-size:88%;display:inline-block;*display: inline;*zoom: 1;transition:all .2s ease-out}.leave-comment-title:hover{background:#59c9bb;color:#fff;text-decoration:none;transition:all .2s ease-out}#box2{float:none;font-size:88%;line-height:1.5;margin:0 auto;max-width:912px}#box2-inner{display:block;*zoom: 1;overflow:hidden}#box2-inner:after{display:block;visibility:hidden;font-size:0;height:0;clear:both;content:"."}#box2-inner .hatena-module{padding:0 17px;width:270px;float:left}#box2-inner .hatena-module:nth-child(3n+1){clear:both}.hatena-module{text-align:left;margin-bottom:60px}.hatena-module-title{font-weight:700;margin:0 0 10px;padding:0 0 10px;font-size:120%;border-bottom:1px solid #ccc}.hatena-module-title a{color:#4d4d4d;text-decoration:none}.hatena-module-title a:hover{text-decoration:underline}.hatena-urllist{list-style:none;margin:0;padding:0}.hatena-urllist li{padding:8px 0;line-height:1.5}.hatena-urllist li a{padding:0 0 1px;border-bottom:1px dotted #64beb3}.hatena-urllist li a:hover{text-decoration:none;color:#64beb3}.hatena-module-profile .profile-icon{float:left;margin:0 10px 10px 0;border-radius:5px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.hatena-module-profile .id{display:block;font-weight:700;font-size:110%;margin-bottom:5px}.hatena-module-profile .id a{padding:0 0 1px;border-bottom:1px dotted #64beb3;font-weight:400}.hatena-module-profile .id a:hover{text-decoration:none;color:#64beb3}.hatena-module-profile .profile-description{font-size:90%}.hatena-module-profile .profile-description p{margin-top:0}.hatena-module-search-box .search-form{width:100%;background:#f4f4f4;margin:20px 0 0;-ms-box-sizing:border-box;box-sizing:border-box;position:relative}.hatena-module-search-box .search-module-input{padding:8px 5px;color:#4d4d4d;background:none;border:none;outline:none;height:20px;width:90%}.hatena-module-search-box .search-module-button{width:20px;height:20px;background:transparent url(https://cdn.blog.st-hatena.com/images/theme/search.png?version=4f79efacea2badc461d4ddb4cc04a7) no-repeat right center;border:none;outline:none;text-indent:-9999px;position:absolute;top:8px;right:5px;opacity:.5;filter:alpha(opacity=50)}.hatena-module-search-box .search-module-button:hover{opacity:.85;filter:alpha(opacity=85)}.pager{margin:20px 0 120px;padding:20px 0;text-align:center;font-size:80%}.pager a{color:#abb4b7;font-size:150%;padding:0 0 3px;transition:all .2s ease-out}.pager a:hover{text-decoration:none;color:#47a89c;border-bottom:2px solid #88cdc4;transition:all .2s ease-out}.pager .pager-prev{margin-right:40px}#footer{padding:30px 0;text-align:center;color:#999;line-height:1.5;font-size:80%;margin:auto 50px}#footer p{margin:0}#footer a{color:#999}#bottom-editarea{max-width:880px;margin:0 auto}.page-about .entry-content{padding:0}.page-about dt{font-size:107%;border-bottom:1px solid #ccc;margin:0 0 8px;padding:0 0 8px;font-weight:700;color:#47a89c}.page-about dd{margin-left:0;margin-bottom:40px}.page-about dd:last-child{margin-bottom:0}.page-archive #main{margin:0 auto 100px;padding:0 0 112px;background:url(https://cdn.blog.st-hatena.com/css/theme/evergreen/images/border.png?version=4f79efacea2badc461d4ddb4cc04a7) no-repeat;background-position:center bottom}.page-archive #main section{margin:0 0 50px}.page-archive #main h1{font-size:113%;margin:0 0 8px;padding:0 0 8px;font-family:Lato,sans-serif;letter-spacing:.1em;border-bottom:1px solid #ccc}.page-archive #main ul{list-style:none;margin:0;padding:0}.page-archive #main ul li{border:none;padding:8px 0;line-heigh:1.5}.page-archive a.entry-title-link{font-size:125%;border-bottom:none;color:#4d4d4d;vertical-align:middle;padding:0}.page-archive a.entry-title-link:hover{text-decoration:none;color:#676767}.page-archive .categories{background:none;margin:0 0 8px;padding:0;vertical-align:middle;display:block;*zoom: 1}.page-archive .categories:after{display:block;visibility:hidden;font-size:0;height:0;clear:both;content:"."}.page-archive .categories a{font-size:88%;color:#fff;background:#3bb4a5;padding:3px 5px;transition:all .2s ease-out;display:inline-block;*display: inline;*zoom: 1}.page-archive .categories a:hover{background:#59c9bb;color:#fff;text-decoration:none;transition:all .2s ease-out}.page-archive .categories a:after{content:"";visibility:hidden}@media (-webkit-min-device-pixel-ratio: 2){.hatena-module-search-box .search-module-button{background:transparent url(https://cdn.blog.st-hatena.com/images/theme/search@2x.png?version=4f79efacea2badc461d4ddb4cc04a7) no-repeat right center;background-size:20px 20px}#blog-title{background:url(https://cdn.blog.st-hatena.com/css/theme/evergreen/images/header@2x.png?version=4f79efacea2badc461d4ddb4cc04a7) no-repeat;background-position:center bottom;background-size:70px 8px}.entry{background:url(https://cdn.blog.st-hatena.com/css/theme/evergreen/images/border@2x.png?version=4f79efacea2badc461d4ddb4cc04a7) no-repeat;background-position:center bottom;background-size:60px 12px}.categories{background:url(https://cdn.blog.st-hatena.com/css/theme/evergreen/images/folder@2x.png?version=4f79efacea2badc461d4ddb4cc04a7) no-repeat;background-size:13px 10px;background-position:left 6px}.entry-content blockquote{background:#f7f7f7 url(https://cdn.blog.st-hatena.com/css/theme/evergreen/images/quote@2x.png?version=4f79efacea2badc461d4ddb4cc04a7) no-repeat;background-position:40px 25px;background-size:45px 35px}.page-archive #main{background:url(https://cdn.blog.st-hatena.com/css/theme/evergreen/images/border@2x.png?version=4f79efacea2badc461d4ddb4cc04a7) no-repeat;background-position:center bottom;background-size:60px 12px}}@media (min-width: 801px) and (max-width: 1040px){#content{padding:0 20px}.entry-header-menu{left:0;top:-35px}#top-editarea,#bottom-editarea{padding:0 20px}#box2{width:608px}#box2 .hatena-module:nth-child(3n+1){clear:none}#box2 .hatena-module:nth-child(odd){clear:both}}@media (max-width: 800px){#globalheader-container{position:static}#container{word-wrap:break-word;overflow:hidden;padding:17px 30px 0}#container-inner{margin:13px auto 0}#content{padding:0 20px}#title{font-size:180%;padding:0 10px}#top-editarea,#bottom-editarea{padding:0 20px}#main{width:100%;float:none}#blog-title{padding:50px 0}#box2{width:100%;float:none}#box2-inner{width:100%}#box2-inner .hatena-module{width:100%;float:none;padding:0}.entry-header-menu{top:-30px;left:0}}@media (max-width: 480px){body{font-size:15px;background:#fff!important}ul{padding:0 0 0 30px}#container{padding:0}#container-inner{margin:0}#content,#top-editarea,#bottom-editarea{padding:0 10px}#blog-title{margin:0 0 50px;padding:50px 0;background-size:35px 4px}.entry-content{padding:30px 0 0;line-height:1.8}.entry-content blockquote{padding:45px 20px 20px;background-position:20px 17px;background-size:23px 18px;line-height:1.4}.entry-content pre{padding:20px}.entry-title{font-size:150%}.header-image-enable #blog-title{margin:0 0 50px}} /* */ .page-index h1#title { font-size: 30px; } .page-index h2#blog-description { font-size: 18px; } .page-entry h1#title { font-size: 30px; } .page-entry h2#blog-description { font-size: 18px; } html { font-size: 18px; } blockquote { background-color:#FFFFFF; border: solid 3px #000000; border-radius: 50px; } p{ line-height:2em; margin:1em 0em 1.5em 0 ; font-size: 1em; } ul li ul li{ list-style:"－ "; margin-top:1em; margin-bottom:1em; } ol li{ margin-top:1em; margin-bottom:1em; } ol li ol li{ margin-top:1em; margin-bottom:1em; } ul li p{ margin-top:0em; margin-bottom:1em; } ol li p{ margin-top:0em; margin-bottom:1em; } .page-index header.entry-header .social-buttons{ display: none; } .page-index footer.entry-footer{ display: none; } .page-index div.entry-inner .ad.ad-online-afc{ display: none; } .page-index footer.entry-footer .ad.entry-footer-ad.google-afc-image.test-google-rectangle-ads{ display: none; } .page-index div.entry-content blockquote{ display: none; } .page-index div.entry-content p{ display: none; } .page-index div.entry-content p.all-honbun{ display: inherit; } .page-index div.entry-content p.samune{ display: inherit; } .page-index div.entry-content div{ display: none; } .page-index div.entry-content div p{ display: none; } .page-index div.entry-content div div{ display: none; } .page-index div.entry-content div table{ display: none; } .page-index div.entry-content table{ display: none; } .page-index ul:not(.global-nav){ display: none; } .page-index footer.entry-footer p{ display: none; } .page-index footer.entry-footer div{ display: none; } .page-index div.entry-content h2{ display: none; } .page-index header#blog-title h2{ display: inherit; } .page-index div.entry-content h3{ display: none; } .page-index div.entry-content h4{ display: none; } .page-index div.entry-content h5{ display: none; } .page-index div.entry-content h6{ display: none; } .page-index .table-of-contents{ display: none; } .page-index ol{ display: none; } .page-index pre{ display: none; } .page-index code{ display: none; } .page-index figure{ display: none; } .page-index figcaption{ display: none; } .box27-red { position: relative; margin: 4em 0 2em 0; padding: 0.5em 1em; border: solid 3px #a22041; background: #fdeff2; font-weight: bold; } .box27-red .box-title { position: absolute; display: inline-block; top: -40px; left: -3px; padding: 0 9px; height: 38px; line-height: 38px; font-size: 25px; background: #a22041; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; } .box27-red p { margin: 0; padding: 0; } .box27-blue { position: relative; margin: 4em 0 2em 0; padding: 0.5em 1em; border: solid 3px #1E50A2; background: #eaf4fc; font-weight: bold; } .box27-blue .box-title { position: absolute; display: inline-block; top: -40px; left: -3px; padding: 0 9px; height: 38px; line-height: 38px; font-size: 25px; background: #1E50A2; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; } .box27-blue p { margin: 0; padding: 0; } ul.kajougaki00001 { background: whitesmoke; padding: 0 0.5em; position: relative; } ul.kajougaki00001 li { line-height: 1.5; padding: 0.5em 0 0.5em 1.5em; border-bottom: 2px solid white; list-style-type: none!important; } ul.kajougaki00001 li:before { font-family: "Font Awesome 5 Free"; content: "\f00c";/*アイコン種類*/ position: absolute; left : 0.5em; /*左端からのアイコンまで*/ color: #668ad8; /*アイコン色*/ } ul.kajougaki00001 li:last-of-type { border-bottom: none;/*最後の線だけ消す*/ } #gradation-box-00001 { align-items: center; justify-content: center; background: #1D1F20; color: #FFFFFF; font-weight: bold; padding: 20px; } .gradation-border-00001 {/*変数設定*/ --borderWidth: 15px; background: #1D1F20; position: relative; border-radius: var(--borderWidth); } .gradation-border-00001:after {/*グラデーション設定。位置は先ほどの変数を代入してclacで計算*/ content: ''; position: absolute; top: calc(-1 * var(--borderWidth)); left: calc(-1 * var(--borderWidth)); height: calc(100% + var(--borderWidth) * 2); width: calc(100% + var(--borderWidth) * 2); background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82); border-radius: calc(2 * var(--borderWidth)); z-index: -1; animation: animatedgradient 3s ease alternate infinite; background-size: 300% 300%; } @keyframes animatedgradient {/*アニメーション設定*/ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .oneArea { display: flex; flex-wrap: wrap; justify-content: flex-start; max-width: 1024px; margin: 50px auto; padding: 0 10px; } .oneArea .onebox-left { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; margin-top: 20px; } .oneArea .onebox-right { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; flex-direction: row-reverse; margin-top: 20px; } .oneArea .onebox-left .imgArea { width: 175px; position: relative; } .oneArea .onebox-right .imgArea { width: 175px; position: relative; } .oneArea .onebox-left .imgArea img { width: 100%; max-width: 200px; position: absolute; top: -10px; left: -75px; padding-right: 30px; } .oneArea .onebox-right .imgArea img { width: 100%; max-width: 200px; position: absolute; top: -10px; right: 75px; padding-left: 30px; } .oneArea .onebox-left .fukiArea { width: 100%; margin-left:100px; margin-right:-75px; } .oneArea .onebox-right .fukiArea { width: 100%; margin-right:100px; margin-left:-75px; } .oneArea .onebox-left .fukidasi { width: 100%; position: relative; padding: 30px; background-color: #F5ECF4; color: #231815; border-radius: 12px; box-sizing: border-box; } .oneArea .onebox-right .fukidasi { width: 100%; position: relative; padding: 30px; background-color: #BBE2F1; color: #231815; border-radius: 12px; box-sizing: border-box; } .oneArea .onebox-left .fukidasi::before { content: ''; position: absolute; display: block; top: 60px; width: 0; height: 0; border-style: solid; border-width: 15px 30px 15px 0; border-color: transparent #F5ECF4 transparent transparent; left: -20px; } .oneArea .onebox-right .fukidasi::before { content: ''; position: absolute; display: block; top: 60px; width: 0; height: 0; border-style: solid; border-width: 15px 30px 15px 0; right: -20px; border-color: transparent #BBE2F1 transparent transparent; transform: rotate(180deg); } @media screen and (max-width: 420px) { .oneArea { margin: 30px auto; } .oneArea .onebox-left { margin-top: 15px; } .oneArea .onebox-right { margin-top: 15px; } .oneArea .onebox-left .fukidasi { padding: 10px 15px; } .oneArea .onebox-right .fukidasi { padding: 10px 15px; } .oneArea .onebox-left .fukiArea { width: 100%; margin-left:75px; margin-right:-25px; } .oneArea .onebox-right .fukiArea { width: 100%; margin-right:75px; margin-left:-25px; } .oneArea .onebox-left .imgArea { margin-left:30px; width: 125px; } .oneArea .onebox-right .imgArea { margin-right:30px; width: 125px; } .oneArea .onebox-left .fukidasi::before { top: 40px; margin-left:10px; border-width: 10px 20px 10px 0px; } .oneArea .onebox-right .fukidasi::before { top: 40px; margin-right:10px; border-width: 10px 20px 10px 0px; } } .sample_box12_small { width: 50%;/* 紙の横幅 100%にすると全幅表示に */ padding: 15px; margin: 2em auto; background: #fbc7f5;/* 紙の色 */ color: #000;/* 文字色 */ box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform:rotate(2deg); word-break: break-all; } .sample_box12_small p { margin: 0; padding: 0; font-size: 0.9em; } .sample_box12_small_tape { width: 50%; height: 35px; margin: -25px auto 0; background: rgba(251, 234, 144, 0.5);/* テープの色 */ transform: rotate(-3deg); opacity: 0.9; } .sample_box12_small_title { text-align: center; font-size: 1.3em!important; margin-top: 10px!important; font-weight: bold; } .sample_box12_small_subtitle { text-align: center; font-size: 0.7em!important; margin-bottom: 1em!important; } .sample_box12_wide { width: 80%;/* 紙の横幅 100%にすると全幅表示に */ padding: 15px; margin: 2em auto; background: #fbc7f5;/* 紙の色 */ color: #000;/* 文字色 */ box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform:rotate(2deg); word-break: break-all; } .sample_box12_wide p { margin: 0; padding: 0; font-size: 0.9em; } .sample_box12_wide_tape { width: 50%; height: 35px; margin: -25px auto 0; background: rgba(251, 234, 144, 0.5);/* テープの色 */ transform: rotate(-3deg); opacity: 0.9; } .sample_box12_wide_title { text-align: center; font-size: 1.3em!important; margin-top: 10px!important; font-weight: bold; } .sample_box12_wide_subtitle { text-align: center; font-size: 0.7em!important; margin-bottom: 1em!important; } .sample_box11 { width: 260px;/* 紙の横幅 100%にすると全幅表示に */ padding: 15px; margin: 2em auto; background: #f7f092;/* 紙の色 */ color: #000;/* 文字色 */ box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform:rotate(2deg); word-break: break-all; } .sample_box11 p { margin: 0; padding: 0; font-size: 0.9em; } .sample_box11_tape { width: 50%; height: 35px; margin: -25px auto 0; background: #989898; transform: rotate(-3deg); opacity: 0.1; } .sample_box11_title { text-align: center; font-size: 1.3em!important; margin-top: 10px!important; } .sample_box11_subtitle { text-align: center; font-size: 0.7em!important; margin-bottom: 1em!important; } #blog-description{font-size:1.5em;} .masking-tape-001{ position: absolute; top: -1em; left: 26%; width:100px; height:30px; background-image: linear-gradient(-45deg, rgba(227,155,140,.4) 25%, transparent 25%, transparent 50%, rgba(227,155,140,.4) 50%, rgba(227,155,140,.4) 75%, transparent 75%, transparent 100%); background-size: 20px 20px; border-left:2px dotted rgba(0,0,0,.1); border-right:2px dotted rgba(0,0,0,.1); box-shadow:0 0 5px rgba(0,0,0,.2); padding: 0.25em 2em; color: #65513f; transform: rotate(-4deg); } .toumei-tape-001{ position: absolute; top: -1em; left: 26%; width:100px; height:30px; background: #ccccbb; opacity: 0.2; background-size: 20px 20px; border-left:2px dotted rgba(0,0,0,.1); border-right:2px dotted rgba(0,0,0,.1); box-shadow:0 0 5px rgba(0,0,0,.2); padding: 0.25em 2em; color: #65513f; transform: rotate(4deg); } .memo { font-weight: bold; position: relative; background: #faf0e6; border-left:4px dotted rgba(0,0,0,.1); border-right:4px dotted rgba(0,0,0,.1); box-shadow:0 0 5px rgba(0,0,0,.2); padding: 1em; color: #65513f; } .memo p { font-weight: bold; color: #65513f; padding: 10px; } .memo-youshi-yellow-001 { font-weight: bold; position: relative; background: #ffffe0; border-left:4px dotted rgba(0,0,0,.1); border-right:4px dotted rgba(0,0,0,.1); box-shadow:0 0 5px rgba(0,0,0,.2); padding: 1em; color: #65513f; } .memo-youshi-yellow-001 p { font-weight: bold; color: #65513f; padding: 10px; } .memo-youshi-green-001 { font-weight: bold; position: relative; background: #f0fff0; border-left:4px dotted rgba(0,0,0,.1); border-right:4px dotted rgba(0,0,0,.1); box-shadow:0 0 5px rgba(0,0,0,.2); padding: 1em; color: #65513f; } .memo-youshi-green-001 p { font-weight: bold; color: #65513f; padding: 10px; } .memo-youshi-orange-001 { font-weight: bold; position: relative; background: #faf0e6; border-left:4px dotted rgba(0,0,0,.1); border-right:4px dotted rgba(0,0,0,.1); box-shadow:0 0 5px rgba(0,0,0,.2); padding: 1em; color: #65513f; } .memo-youshi-orange-001 p { font-weight: bold; color: #65513f; padding: 10px; } ol.tegaki-list-001{ counter-reset:list; list-style-type:none; position:relative; padding: 1.2em; background:#F2EFE7; -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ; -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ; } ol.tegaki-list-001:after{ position: absolute; bottom: 8px; right: 1.2em; font-size:12px; color:#bbb; } ol.tegaki-list-001 li{ position:relative; padding: 7px 5px 7px 50px; margin: 7px 0 10px 0px; font-weight: bold; font-size:14px; border-bottom:solid 1px #000000; color:#333; } ol.tegaki-list-001 li:first-child{ margin-top:0; } ol.tegaki-list-001 li:last-child{ margin-bottom:0px; } ol.tegaki-list-001 li:before{ counter-increment: list; content: counter(list) ","; position: absolute; left: 15px; font-size:1.2em; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .up-arrow-tsuki-box001-gray { border-radius: 10px; margin-top: 2em; margin-bottom: 1em; padding: 1em; position: relative; background: #eeeeee; border: 1px solid #000000; } .up-arrow-tsuki-box001-gray:after, .up-arrow-tsuki-box001-gray:before { bottom: 100%; left: 20%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } .up-arrow-tsuki-box001-gray:after { border-color: rgba(247, 221, 51, 0); border-bottom-color: #eeeeee; border-width: 30px; margin-left: -30px; } .up-arrow-tsuki-box001-gray:before{ border-color: rgba(0, 0, 0, 0); border-bottom-color: #000000; border-width: 31px; margin-left: -31px; } .up-arrow-tsuki-box001-normal-yellow { border-radius: 10px; margin-top: 2em; margin-bottom: 1em; padding: 1em; position: relative; background: #fbee99; border: 1px solid #000000; } .up-arrow-tsuki-box001-normal-yellow:after, .up-arrow-tsuki-box001-normal-yellow:before { bottom: 100%; left: 20%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } .up-arrow-tsuki-box001-normal-yellow:after { border-color: rgba(247, 221, 51, 0); border-bottom-color: #fbee99; border-width: 30px; margin-left: -30px; } .up-arrow-tsuki-box001-normal-yellow:before{ border-color: rgba(0, 0, 0, 0); border-bottom-color: #000000; border-width: 31px; margin-left: -31px; } .up-arrow-tsuki-box001-light-yellow { border-radius: 10px; margin-top: 2em; margin-bottom: 1em; padding: 1em; position: relative; background: #fdf6cc; border: 1px solid #000000; } .up-arrow-tsuki-box001-light-yellow:after, .up-arrow-tsuki-box001-light-yellow:before { bottom: 100%; left: 20%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } .up-arrow-tsuki-box001-light-yellow:after { border-color: rgba(247, 221, 51, 0); border-bottom-color: #fdf6cc; border-width: 30px; margin-left: -30px; } .up-arrow-tsuki-box001-light-yellow:before{ border-color: rgba(0, 0, 0, 0); border-bottom-color: #000000; border-width: 31px; margin-left: -31px; } .up-arrow-tsuki-box001-dark-yellow { border-radius: 10px; margin-top: 2em; margin-bottom: 1em; padding: 1em; position: relative; background: #F7DD33; border: 1px solid #000000; } .up-arrow-tsuki-box001-dark-yellow:after, .up-arrow-tsuki-box001-dark-yellow:before { bottom: 100%; left: 20%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } .up-arrow-tsuki-box001-dark-yellow:after { border-color: rgba(247, 221, 51, 0); border-bottom-color: #F7DD33; border-width: 30px; margin-left: -30px; } .up-arrow-tsuki-box001-dark-yellow:before{ border-color: rgba(0, 0, 0, 0); border-bottom-color: #000000; border-width: 31px; margin-left: -31px; } p.p-margin-buttom-10line{ margin:2em 1em 10em 0em; } .two-line-title-box001 { background: #FFFFFF; position: relative; margin: 100px 0 0 0; padding: 0.5em 0.5em 0.5em 0.5em; border: solid 3px #000000; } .two-line-title-box001 .box-title { font-size: 25px; position: absolute; display: inline-block; top: -80px; left: -3px; padding: 10px 10px 10px 10px; height: 60px; line-height: 30px; vertical-align: middle; background: #000000; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; } .two-line-title-box001 p { font-size: 1em; margin: 0.5em 0.5em 0.5em 0.5em; padding: 0.5em 0.5em 0.5em 0.5em; line-height: 2.5em; } .two-line-title-box001 ul{ list-style: disc; } .two-line-title-box001 ul li{ line-height:2; padding:0em 0em 0.5em 0em; } .two-line-title-box001 ol li{ line-height:2; padding:0em 0em 0.5em 0em; } .three-line-title-box001 { background: #FFFFFF; position: relative; margin: 100px 0 0 0; padding: 0.5em 0.5em 0.5em 0.5em; border: solid 3px #000000; } .three-line-title-box001 .box-title { font-size: 25px; position: absolute; display: inline-block; top: -120px; left: -3px; padding: 10px 10px 10px 10px; height: 100px; line-height: 30px; vertical-align: middle; background: #000000; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; } .three-line-title-box001 p { font-size: 1em; margin: 0.5em 0.5em 0.5em 0.5em; padding: 0.5em 0.5em 0.5em 0.5em; line-height: 2.5em; } .three-line-title-box001 ul{ list-style: disc; } .three-line-title-box001 ul li{ line-height:2; padding:0em 0em 0.5em 0em; } .three-line-title-box001 ol li{ line-height:2; padding:0em 0em 0.5em 0em; } .four-line-title-box001 { background: #FFFFFF; position: relative; margin: 100px 0 0 0; padding: 0.5em 0.5em 0.5em 0.5em; border: solid 3px #000000; } .four-line-title-box001 .box-title { font-size: 25px; position: absolute; display: inline-block; top: -135px; left: -3px; padding: 10px 10px 10px 10px; height: 115px; line-height: 30px; vertical-align: middle; background: #000000; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; } .four-line-title-box001 p { font-size: 1em; margin: 0.5em 0.5em 0.5em 0.5em; padding: 0.5em 0.5em 0.5em 0.5em; line-height: 2.5em; } .four-line-title-box001 ul{ list-style: disc; } .four-line-title-box001 ul li{ line-height:2; padding:0em 0em 0.5em 0em; } .four-line-title-box001 ol li{ line-height:2; padding:0em 0em 0.5em 0em; } .five-line-title-box001 { background: #FFFFFF; position: relative; margin: 100px 0 0 0; padding: 0.5em 0.5em 0.5em 0.5em; border: solid 3px #000000; } .five-line-title-box001 .box-title { font-size: 25px; position: absolute; display: inline-block; top: -165px; left: -3px; padding: 10px 10px 10px 10px; height: 145px; line-height: 30px; vertical-align: middle; background: #000000; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; } .five-line-title-box001 p { font-size: 1em; margin: 0.5em 0.5em 0.5em 0.5em; padding: 0.5em 0.5em 0.5em 0.5em; line-height: 2.5em; } .five-line-title-box001 ul{ list-style: disc; } .five-line-title-box001 ul li{ line-height:2; padding:0em 0em 0.5em 0em; } .five-line-title-box001 ol li{ line-height:2; padding:0em 0em 0.5em 0em; } .eight-line-title-box001 { background: #FFFFFF; position: relative; margin: 300px 0 0 0; padding: 0.5em 0.5em 0.5em 0.5em; border: solid 3px #000000; } .eight-line-title-box001 .box-title { font-size: 25px; position: absolute; display: inline-block; top: -280px; left: -3px; padding: 10px 10px 10px 10px; height: 260px; line-height: 30px; vertical-align: middle; background: #000000; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; } .eight-line-title-box001 p { font-size: 1em; margin: 0.5em 0.5em 0.5em 0.5em; padding: 0.5em 0.5em 0.5em 0.5em; line-height: 2.5em; } .eight-line-title-box001 ul{ list-style: disc; } .eight-line-title-box001 ul li{ line-height:2; padding:0em 0em 0.5em 0em; } .eight-line-title-box001 ol li{ line-height:2; padding:0em 0em 0.5em 0em; } body{ counter-reset: chapter; } .page-entry div#content h2{ counter-reset: sub-chapter; } .page-entry div#content h3{ counter-reset: section; } .page-entry div.entry-content h2{ margin: 3em 0em 1em 0em; line-height: 2; counter-reset: sub-chapter; color: #ffffff; background-color: #006948; padding: 0.5em 0.5em 0.5em 0.5em; font-size: 1.5em; border: 4px solid #000; border-radius: 10px; display: flex; justify-content: start; align-items: center; } .page-entry div.entry-content h2::before { counter-increment: chapter; content: counter(chapter); border: 0.5px solid #000000; background: #FFFFFF; color: #000000; padding: 0.25em 0.5em 0.25em 0.5em; margin: 0em 0.5em 0em 0em; border-radius: 5px; } .page-entry div.entry-content h3 { margin: 3em 0em 1em 0em; line-height: 2; color: #000000; background-color: #d6e9ca; position: relative; padding: 0.5em 0.5em 0.5em 0.5em; font-size: 1.25em; border: 2px solid #000; border-radius: 10px; display: flex; justify-content: start;; align-items: center; } .page-entry div.entry-content h3:before { counter-increment: sub-chapter; content: counter(chapter) "-" counter(sub-chapter); border: 0.5px solid #000000; background: #FFFFFF; color: #000000; padding: 0.25em 0.5em 0.25em 0.5em; margin: 0em 0.5em 0em 0em; border-radius: 5px; } .page-entry div.entry-content h2 + h3{ margin: 0em 0em 1em 0em; } .page-entry div.entry-content h4 { margin: 3em 0em 1em 0em; border: 1px solid #000; border-image-slice: 1; line-height: 2; font-size: 1em; background-color: #EEEEEE; position: relative; padding: 0.5em 0.5em 0.5em 0.5em; border-radius: 10px; display: flex; justify-content: start; align-items: center; } .page-entry div.entry-content h4:before { counter-increment: section; content: counter(chapter) "-" counter(sub-chapter) "-" counter(section); border: 0.5px solid #000000; background: #FFFFFF; color: #000000; padding: 0.25em 0.5em 0.25em 0.5em; margin: 0em 0.5em 0em 0em; border-radius: 5px; } .page-entry div.entry-content h3 + h4{ margin: 0em 0em 1em 0em; } .page-entry div.entry-content a{ color: #1A0DAB; background-color: #E0FFFF; text-decoration-line: underline; text-decoration-color: #0033CC; text-decoration-thickness: 0.2em; text-decoration-skip-ink:none; text-underline-offset: 0.1em; padding-buttom: 0.5em; } .page-entry div.entry-content a:visited { color: #660099; background-color: #FFEEFF; text-decoration-line: underline; text-decoration-color: #663399; text-decoration-thickness: 0.1em; text-decoration-skip-ink:none; text-underline-offset: 0.05em; padding-buttom: 0.5em; } /* 邪魔なキーワード下線を消す */ a.keyword { border: 0 !important; text-decoration: none !important; pointer-events: none !important; cursor: default; color: #5A5A5A; } .keikou-pen-ugoku.active{ background-position: -100% .8em; } .keikou-pen-ugoku { background-image: -webkit-linear-gradient(left, transparent 50%, RGBA(255,250,153,1) 50%); background-image: -moz-linear-gradient(left, transparent 50%, RGBA(255,250,153,1) 50%); background-image: -ms-linear-gradient(left, transparent 50%, RGBA(255,250,153,1) 50%); background-image: -o-linear-gradient(left, transparent 50%, RGBA(255,250,153,1) 50%); background-image: linear-gradient(left, transparent 50%, RGBA(255,250,153,1) 50%); background-repeat: repeat-x; background-size: 200% .8em; background-position: 0 .8em; transition: all 2s ease; font-weight: bold; } .global-nav { margin: 0 0 30px; padding: 0; border-top: 1px solid #aaa; font-size: 20px; list-style-type: none; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; } /*clearfix*/ .global-nav:after { content: ""; clear: both; display: block; } .global-nav li { float: left; width: 50%; text-align: center; border-bottom: 1px solid #aaa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*奇数のli要素に適応*/ .global-nav li:nth-child(odd) { border-right: 1px solid #aaa; } .global-nav a { display: block; line-height: 44px; color: #000; text-decoration: none; color:#FFFFFF; background-color:#000000; } .global-nav a:hover { color: #000; background: #e6e6e6; } ul.table-of-contents, ol.table-of-contents { padding: 0; margin: 5em 1em 5em 1em; } ul.table-of-contents li, ol.table-of-contents li { color: #404040; border-left: solid 10px #1fa67a;/*左側の線*/ background: #dddddd; margin-top: 15px; margin-bottom: 15px;/*下のバーとの余白*/ line-height: 2; padding: 0.25em; font-weight: bold; list-style-type: none!important;/*ポチ消す*/ padding-top:5px; } ul.table-of-contents:before { content: "目次"; /* お好きな文言に変更してください */ color: #404040; border-left: solid 10px #1fa67a;/*左側の線*/ background: #dddddd; margin-bottom: 5px;/*下のバーとの余白*/ line-height: 2.5; padding: 0.25em; font-weight: bold; list-style-type: none!important;/*ポチ消す*/ font-size: 200%; } ul.table-of-contents li ul li, ol.table-of-contents li ul li{ background: #eeeeee; } ul.table-of-contents li ul li ul li, ol.table-of-contents li ul li ui li ui{ background: #ffffff; } .keikou-pen-purple{ background:linear-gradient(transparent 70%, RGBA(206, 158, 255, 1) 70%); font-weight:bold; } .keikou-pen-purple-ugoku{ background-image: -webkit-linear-gradient(left, transparent 50%, RGBA(206, 158, 255, 0.7), 50%); background-image: -moz-linear-gradient(left, transparent 50%, RGBA(206, 158, 255, 0.7) 50%); background-image: -ms-linear-gradient(left, transparent 50%, RGBA(206, 158, 255, 0.7) 50%); background-image: -o-linear-gradient(left, transparent 50%, RGBA(206, 158, 255, 0.7) 50%); background-image: linear-gradient(left, transparent 50%, RGBA(206, 158, 255, 0.7) 50%); background-repeat: repeat-x; background-size: 200% .8em; background-position: 0 .8em; transition: all 2s ease; font-weight: bold; } .keikou-pen-purple-link{ background:linear-gradient(transparent 70%, RGBA(206, 158, 255, 1) 70%); font-weight:bold; background-color: #cce0ff; text-decoration:underline;/*下線を引く*/ } .keikou-pen-yellow{ background:linear-gradient(transparent 70%, RGBA(255, 220, 0, 1) 70%); font-weight:bold; } .keikou-pen-yellow-ugoku{ background-image: -webkit-linear-gradient(left, transparent 50%, RGBA(255, 220, 0, 0.7), 50%); background-image: -moz-linear-gradient(left, transparent 50%, RGBA(255, 220, 0, 0.7) 50%);ffdc00 background-image: -ms-linear-gradient(left, transparent 50%, RGBA(255, 220, 0, 0.7) 50%); background-image: -o-linear-gradient(left, transparent 50%, RGBA(255, 220, 0, 0.7) 50%); background-image: linear-gradient(left, transparent 50%, RGBA(255, 220, 0, 0.7) 50%); background-repeat: repeat-x; background-size: 200% .8em; background-position: 0 .8em; transition: all 2s ease; font-weight: bold; } .keikou-pen-yellow-link{ background:linear-gradient(transparent 70%, RGBA(255, 220, 0, 1) 70%); font-weight:bold; background-color: #cce0ff; text-decoration:underline;/*下線を引く*/ } .keikou-pen-orange{ background:linear-gradient(transparent 70%, RGBA(255, 206, 158, 1) 70%); font-weight:bold; } .keikou-pen-orange-ugoku{ background-image: -webkit-linear-gradient(left, transparent 50%, RGBA(255, 206, 158, 0.7), 50%); background-image: -moz-linear-gradient(left, transparent 50%, RGBA(255, 206, 158, 0.7) 50%); background-image: -ms-linear-gradient(left, transparent 50%, RGBA(255, 206, 158, 0.7) 50%); background-image: -o-linear-gradient(left, transparent 50%, RGBA(255, 206, 158, 0.7) 50%); background-image: linear-gradient(left, transparent 50%, RGBA(255, 206, 158, 0.7) 50%); background-repeat: repeat-x; background-size: 200% .8em; background-position: 0 .8em; transition: all 2s ease; font-weight: bold; } .keikou-pen-orange-link{ background:linear-gradient(transparent 70%, RGBA(255, 206, 158, 1) 70%); font-weight:bold; background-color: #cce0ff; text-decoration:underline;/*下線を引く*/ } .keikou-pen-green{ background:linear-gradient(transparent 70%, RGBA(120, 220, 88, 1) 70%); font-weight:bold; } .keikou-pen-green-ugoku{ background-image: -webkit-linear-gradient(left, transparent 50%, RGBA(120, 220, 88, 0.7) 50%); background-image: -moz-linear-gradient(left, transparent 50%, RGBA(120, 220, 88, 0.7) 50%); background-image: -ms-linear-gradient(left, transparent 50%, RGBA(120, 220, 88, 0.7) 50%); background-image: -o-linear-gradient(left, transparent 50%, RGBA(120, 220, 88, 0.7) 50%); background-image: linear-gradient(left, transparent 50%, RGBA(120, 220, 88, 0.7) 50%); background-repeat: repeat-x; background-size: 200% .8em; background-position: 0 .8em; transition: all 2s ease; font-weight: bold; } .keikou-pen-green-link{ background:linear-gradient(transparent 70%, RGBA(120, 220, 88, 1) 70%); font-weight:bold; background-color: #cce0ff; text-decoration:underline;/*下線を引く*/ } .keikou-pen-blue{ background:linear-gradient(transparent 70%, RGBA(127, 191, 255) 70%); font-weight:bold; } .keikou-pen-blue-ugoku{ background-image: -webkit-linear-gradient(left, transparent 50%, RGBA(127, 191, 255, 0.7) 50%); background-image: -moz-linear-gradient(left, transparent 50%, RGBA(127, 191, 255, 0.7) 50%); background-image: -ms-linear-gradient(left, transparent 50%, RGBA(127, 191, 255, 0.7) 50%); background-image: -o-linear-gradient(left, transparent 50%, RGBA(127, 191, 255, 0.7) 50%); background-image: linear-gradient(left, transparent 50%, RGBA(127, 191, 255, 0.7) 50%); background-repeat: repeat-x; background-size: 200% .8em; background-position: 0 .8em; transition: all 2s ease; font-weight: bold; } .keikou-pen-blue-link{ background:linear-gradient(transparent 70%, RGBA(127, 191, 255, 1) 70%); font-weight:bold; background-color: #cce0ff; text-decoration:underline;/*下線を引く*/ } .keikou-pen-pink{ background:linear-gradient(transparent 70%, RGBA(255, 158, 206, 1) 70%); font-weight:bold; } .keikou-pen-pink-ugoku{ background-image: -webkit-linear-gradient(left, transparent 50%, RGBA(255, 158, 206, 0.7) 50%); background-image: -moz-linear-gradient(left, transparent 50%, RGBA(255, 158, 206, 0.7) 50%); background-image: -ms-linear-gradient(left, transparent 50%, RGBA(255, 158, 206, 0.7) 50%); background-image: -o-linear-gradient(left, transparent 50%, RGBA(255, 158, 206, 0.7) 50%); background-image: linear-gradient(left, transparent 50%, RGBA(255, 158, 206, 0.7) 50%); background-repeat: repeat-x; background-size: 200% .8em; background-position: 0 .8em; transition: all 2s ease; font-weight: bold; } .keikou-pen-pink-link{ background:linear-gradient(transparent 70%, RGBA(255, 158, 206, 1) 70%); font-weight:bold; background-color: #cce0ff; text-decoration:underline;/*下線を引く*/ } .keikou-pen-link{ font-weight:bold; background-color: #cce0ff; text-decoration:underline;/*下線を引く*/ } .midashi-tsuki-box001-blue { margin: 2em 0; background: #eaffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); } .midashi-tsuki-box001-blue .box-title { font-size: 2.0em; background: #19448e; padding: 4px; text-align: left; color: #FFF; font-weight: bold; letter-spacing: 0.05em; } .midashi-tsuki-box001-blue p { padding: 15px 20px; margin: 0; } .midashi-tsuki-box001-pink { margin: 2em 0; background: #fff4ff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); } .midashi-tsuki-box001-pink .box-title { font-size: 2.0em; background: #a22041; padding: 4px; text-align: left; color: #FFF; font-weight: bold; letter-spacing: 0.05em; } .midashi-tsuki-box001-pink p { padding: 15px 20px; margin: 0; } .kokuban001-green { position: relative; margin: 2em auto; padding: 1em; width: 90%; /* ボックス幅 */ background: #006633; /* ボックス背景色 */ color: #fff; /* 文章色 */ border: 8px solid #b2771f; /* 枠線 */ border-radius: 3px; /* 角の丸み */ box-shadow: 0 0 5px #333, 0 0 5px #555 inset; } .kokuban001-green::before, .kokuban001-green::after { position: absolute; content: ''; bottom: 0; } .kokuban001-green::before { width: 20px; right: 10px; border: solid 3px #ffff00; /*チョーク（黄色）*/ border-radius: 3px 2px 0 2px; } .kokuban001-green::after { width: 15px; right: 45px; border: solid 3px #fff; /*チョーク（白） */ border-radius: 8px 5px 2px 5px; } .kokuban001-blue { position: relative; margin: 2em auto; padding: 1em; width: 90%; /* ボックス幅 */ background: #044072; /* ボックス背景色 */ color: #fff; /* 文章色 */ border: 8px solid #b2771f; /* 枠線 */ border-radius: 3px; /* 角の丸み */ box-shadow: 0 0 5px #333, 0 0 5px #555 inset; } .kokuban001-blue::before, .kokuban001-blue::after { position: absolute; content: ''; bottom: 0; } .kokuban001-blue::before { width: 20px; right: 10px; border: solid 3px #ffff00; /*チョーク（黄色）*/ border-radius: 3px 2px 0 2px; } .kokuban001-blue::after { width: 15px; right: 45px; border: solid 3px #fff; /*チョーク（白） */ border-radius: 8px 5px 2px 5px; } .kokuban001-gray { position: relative; margin: 2em auto; padding: 1em; width: 90%; /* ボックス幅 */ background: #DDDDDD; /* ボックス背景色 */ color: #000000; /* 文章色 */ border: 8px solid #b2771f; /* 枠線 */ border-radius: 3px; /* 角の丸み */ box-shadow: 0 0 5px #333, 0 0 5px #555 inset; } .kokuban001-gray::before, .kokuban001-gray::after { position: absolute; content: ''; bottom: 0; } .kokuban001-gray::before { width: 20px; right: 10px; border: solid 3px #ffff00; /*チョーク（黄色）*/ border-radius: 3px 2px 0 2px; } .kokuban001-gray::after { width: 15px; right: 45px; border: solid 3px #EA9198; /*チョーク（ピンク） */ border-radius: 8px 5px 2px 5px; } .kokuban001-gray-small { position: relative; margin: 2em auto; padding: 1em; width: 65%; /* ボックス幅 */ background: #DDDDDD; /* ボックス背景色 */ color: #000000; /* 文章色 */ border: 8px solid #b2771f; /* 枠線 */ border-radius: 3px; /* 角の丸み */ box-shadow: 0 0 5px #333, 0 0 5px #555 inset; } .kokuban001-gray-small::before, .kokuban001-gray-small::after { position: absolute; content: ''; bottom: 0; } .kokuban001-gray-small::before { width: 20px; right: 10px; border: solid 3px #ffff00; /*チョーク（黄色）*/ border-radius: 3px 2px 0 2px; } .kokuban001-gray-small::after { width: 15px; right: 45px; border: solid 3px #EA9198; /*チョーク（ピンク） */ border-radius: 8px 5px 2px 5px; } .hukidashi001 { position: relative; margin: 2em 0 2em 40px; padding: 15px; background: #fff0c6; border-radius: 30px; } .hukidashi001:before { content: ""; position: absolute; left: -38px; width: 13px; height: 12px; bottom: 0; background: #fff0c6; border-radius: 50%; } .hukidashi001:after { content: ""; position: absolute; left: -24px; width: 20px; height: 18px; bottom: 3px; background: #fff0c6; border-radius: 50%; } .hukidashi001 p { margin: 0; padding: 0; } .cp_actab { position: relative; overflow: hidden; width: 100%; margin: 0 auto; color: #ffffff; } .cp_actab input { position: absolute; z-index: -1; opacity: 0; } .cp_actab label { font-weight: bold; line-height: 3; position: relative; display: block; padding: 0 0 0 1em; cursor: pointer; margin: 0 0 1px 0; background: #da3c41; } .cp_actab .cp_actab-content { overflow: scroll; max-height: 0; -webkit-transition: max-height 0.35s; transition: max-height 0.35s; color: #333333; background: #f1c6c6; } .cp_actab .cp_actab-content p { margin: 1em; } /* :checked */ .cp_actab input:checked ~ .cp_actab-content { max-height: 20em; } /* Icon */ .cp_actab label::after { line-height: 3; position: absolute; top: 0; right: 0; display: block; width: 3em; height: 3em; -webkit-transition: all 0.35s; transition: all 0.35s; text-align: center; } .cp_actab input[type=checkbox] + label::after { content: '+'; } .cp_actab input[type=checkbox]:checked + label::after { transform: rotate(315deg); } .kakomi001-blue{ padding: 0.2em 0.5em; margin: 2em 0; background: #d6ebff; box-shadow: 0px 0px 0px 10px #d6ebff; border: dashed 2px white; } .kakomi001-blue p { margin: 0; padding: 0; } .kakomi001-pink { padding: 0.2em 0.5em; margin: 2em 0; color: #565656; background: #ffeaea; box-shadow: 0px 0px 0px 10px #ffeaea; border: dashed 2px #ffc3c3; border-radius: 8px; } .kakomi001-pink p { margin: 0; padding: 0; } .kakomi002-orange { position: relative; margin: 2em auto; padding: 1em; color: #606060; background-color: #faf0e6; border: 2px solid #800000; } .kakomi002-orange .kakomi002-orange-title { position: absolute; display: inline-block; top: -27px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; vertical-align: middle; font-size: 17px; background: #800000; color: #ffffff; font-weight: bold; } .kakomi002-blue{ position: relative; margin: 2em auto; padding: 1em; color: #606060; background-color: #F0F8FF; border: 2px solid #191970; } .kakomi002-blue .kakomi002-blue-title { position: absolute; display: inline-block; top: -27px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; vertical-align: middle; font-size: 17px; background: #191970; color: #ffffff; font-weight: bold; } .jikosyoukai-width80 { margin: 2em 0; background: #f1f1f1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); width: 80%; margin-left:auto;margin-right:0px; } .jikosyoukai-width80 .jikosyoukai-width80-title { font-size: 2em; background: #5fc2f5; padding: 4px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.05em; } .jikosyoukai-width80 p { padding: 5px; margin: 0; } .jikosyoukai-width100 { margin: 2em 0; background: #f1f1f1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); width: 100%; margin-left:auto;margin-right:0px; } .jikosyoukai-width100 .jikosyoukai-width100-title { font-size: 2em; background: #5fc2f5; padding: 4px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.05em; } .jikosyoukai-width100 p { padding: 5px; margin: 0; } table.table20231109{ width: 100%; border-collapse:separate; border-spacing: 0; } table.table20231109 tr:first-child{ color:white; font-weight: bold; background: linear-gradient(#829ebc,#225588); } table.table20231109 th:first-child{ border-radius: 5px 0 0 0; } table.table20231109 th:last-child{ border-radius: 0 5px 0 0; border-right: 1px solid #3c6690; } table.table20231109 th{ text-align: center; color:white; background: linear-gradient(#829ebc,#225588); border-left: 1px solid #3c6690; border-top: 1px solid #3c6690; border-bottom: 1px solid #3c6690; box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset; width: 25%; padding: 10px 0; } table.table20231109 td{ text-align: center; border-left: 1px solid #a8b7c5; border-bottom: 1px solid #a8b7c5; border-top:none; box-shadow: 0px -3px 5px 1px #eee inset; width: 25%; padding: 10px 0; } table.table20231109 td:last-child{ border-right: 1px solid #a8b7c5; } table.table20231109 tr:last-child td:first-child { border-radius: 0 0 0 5px; } table.table20231109 tr:last-child td:last-child { border-radius: 0 0 5px 0; } #title{font-size: 45px;} #subtitle{font-size: 15px;} #menu { position: relative; width: 100%; padding-left: 0px; height: 40px; background: #343838;/*グローバルメニュー背景色*/ } .menu-inner{ width: 968px; margin: 0 auto; height: 40px; } #menu li { list-style-type: none; float: left; height: 40px; text-align: left; } #menu li a { padding-left: 15px; padding-right: 15px; display: block; color: #ffffff;/*グローバルメニュー文字色*/ font-size: 100%; font-weight: bold; line-height: 40px; } #menu li:hover a { color: #00DFFC; background: #ffffff; transition: all .5s; } .menu-toggle{ display: none; } /*パソコン１カラム*/ @media screen and (max-width:968px){ .menu-inner{ width: 768px; } } /*タブレット*/ @media screen and (max-width:768px){ #top-editarea{ height: initial; background: #343838;/*MENU背景色*/ text-align: right;/*MENUの文字の位置*/ width: 100%; } .menu-toggle{ color: #ffffff;/*MENUの文字色*/ display: inline-block; padding: 5px; margin: 3px; } #menu { width: 100%; display: none; height: initial; padding: 0; margin: 0; } .menu-inner{ width: 100%; height: initial; position: static; margin: 0; } #menu li{ float: none; height: 35px; width: 100%; list-style-type: none; background: #00DFFC;/*リスト文字の背景色*/ margin: 0 auto; text-align: left;/*リストの文字の位置*/ } #menu li a { height: initial; color: #343838;/*リスト文字色*/ display: block; } #menu li:hover a{ color: initial; background: initial; }