@charset "utf-8";
/*****************************************************************************************************
リセット
******************************************************************************************************/
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
  font-size: 100%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
img {
  vertical-align: middle;
}

/*****************************************************************************************************
フォント
******************************************************************************************************/
body {
  font-family: "SF Pro JP", "SF Pro Display", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", Osaka, "sans-serif";
  font-weight: 300;
  line-height: 1.5;
  color: #222;
  overflow-wrap: break-word;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  font-weight: 600;
}

/*****************************************************************************************************
リンク
******************************************************************************************************/
/* Dark Green */
a {
  text-decoration: none;
  color: #208a3d;
}
a:hover {
  color: #34c759;
}

/* Light Green */
a.l-green {
  color: #4fe669;
}
a.l-green:hover {
  color: #34c759;
}

/*****************************************************************************************************
リンク（ボタン）
******************************************************************************************************/
a.btn {
  display: inline-block;
  box-sizing: border-box;
  border: solid 1px;
  border-radius: 3px;
  padding: 0.5em 1em;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
a.btn:hover {
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}

/* Dark Green */
a.btn.d-green {
  color: #208a3d;
  border-color: #208a3d;
  background-color: transparent;
}
a.btn.d-green:hover {
  color: #fff;
  border-color: #208a3d;
  background-color: #208a3d;
}

/* Dark Green (Fill) */
a.btn.d-green-fill {
  color: #fff;
  border-color: #208a3d;
  background-color: #208a3d;
}
a.btn.d-green-fill:hover {
  color: #fff;
  border-color: #34c759;
  background-color: #34c759;
}

/* Light Green */
a.btn.l-green {
  color: #4fe669;
  border-color: #4fe669;
  background-color: transparent;
}
a.btn.l-green:hover {
  color: #fff;
  border-color: #4fe669;
  background-color: #4fe669;
}

/* Dark Purple */
a.btn.d-purple {
  color: #663e80;
  border-color: #663e80;
  background-color: transparent;
}
a.btn.d-purple:hover {
  color: #fff;
  border-color: #663e80;
  background-color: #663e80;
}

/* Dark Red */
a.btn.d-red {
  color: #993831;
  border-color: #993831;
  background-color: transparent;
}
a.btn.d-red:hover {
  color: #fff;
  border-color: #993831;
  background-color: #993831;
}

/* Black */
a.btn.black {
  color: #000;
  border-color: #000;
  background-color: transparent;
}
a.btn.black:hover {
  color: #fff;
  border-color: #000;
  background-color: #000;
}

/* White */
a.btn.white {
  color: #fff;
  border-color: #fff;
  background-color: transparent;
}
a.btn.white:hover {
  color: #000;
  border-color: #fff;
  background-color: #fff;
}

/*****************************************************************************************************
汎用クラス
******************************************************************************************************/
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
.secret {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(0 0 99.9% 99.9%);
  clip-path: inset(0 0 99.9% 99.9%);
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
}

/*****************************************************************************************************
背景
******************************************************************************************************/
body {
  background-color: #f2f2f7;
  position: relative;
}
.background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
}
img.semicircle-1,
img.semicircle-2 {
  position: absolute;
  left: 50%;
}
img.semicircle-1 {
  top: 0;
  margin-left: -800px;
}
img.semicircle-2 {
  top: 150px;
  margin-left: 400px;
}
@media only screen and (max-width: 820px) {
  img.semicircle-1 {
    margin-left: -600px;
  }
  img.semicircle-2 {
    display: none;
  }
}
@media only screen and (max-width: 700px) {
  img.semicircle-1 {
    margin-left: -500px;
  }
}

/*****************************************************************************************************
Claris FileMaker を体験してみましょう
******************************************************************************************************/
.intro {
  max-width: 1030px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 75px 15px 50px 15px;
  text-align: center;
}

.intro h1 {
  font-size: 200%; /*32*/
}
.intro h1 br {
  display: none;
}

.intro p {
  font-size: 100%; /*16*/
  margin-top: 1em;
}

@media only screen and (max-width: 700px) {
  .intro h1 br {
    display: inline;
  }
  .intro p br {
    display: none;
  }
}

a.expandable-switch {
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
a.expandable-switch i.fa.fa-minus-square-o {
  display: none;
}

.expandable-box {
  display: none;
  padding-bottom: 10px;
}

/*****************************************************************************************************
Claris ロゴ
******************************************************************************************************/
img.claris-logo {
  height: 30px;
  position: absolute;
  top: 15px;
  left: 15px;
}

/*****************************************************************************************************
無料評価版ボタン
******************************************************************************************************/
a.trial-btn {
  font-size: 81.3%; /*13*/
  position: fixed;
  top: 10px;
  right: 10px;
}
@media only screen and (max-width: 820px) {
  a.trial-btn {
    position: absolute;
  }
}

/*****************************************************************************************************
Topに戻る
******************************************************************************************************/
a#top {
  position: absolute;
  top: 0;
}

a.back-to-top {
  display: block;
  width: 40px;
  height: 40px;
  position: fixed;
  right: 10px;
  bottom: -50px;
  z-index: 8;
  transition: bottom 0.5s;
}
a.back-to-top.scrolled {
  bottom: 20px;
  transition: bottom 0.5s;
}

a.back-to-top img {
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  transition: top 0.25s;
}
a.back-to-top img:hover {
  top: -4px;
  transition: top 0.25s;
}

/*****************************************************************************************************
フィルター
******************************************************************************************************/
.filters_area {
  background-color: #fff;
  padding: 25px 0;
}

ul.filters {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  letter-spacing: -0.4em;
}
ul.filters li {
  letter-spacing: normal;
  display: inline-block;
  vertical-align: top;
  padding: 5px 3px;
}

.filter {
  display: block;
  cursor: pointer;
  user-select: none;
  height: 40px;
  font-size: 81.3%; /*13*/
  line-height: 38px;
  color: #000;
  box-sizing: border-box;
  border: solid 1px #999;
  border-radius: 20px;
  padding: 0 13px;
  transition: background-color 0.25s;
}
.filter:hover,
.filter.selected {
  color: #fff;
  background-color: #999;
  transition: background-color 0.25s;
}

/* フィルターのアイコン ***************************************/
.filter_icon {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  background-size: 24px 48px;
  background-repeat: no-repeat;
  background-position: left top;
  margin-right: 10px;
}
.filter:hover .filter_icon,
.filter.selected .filter_icon {
  background-position: left bottom;
}

.all .filter_icon {
  background-image: url("http://www.r0se-link.com/0420_461_filter_all.png");
}
.w1 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w1.png");
}
.w2 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w2.png");
}
.w3 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w3.png");
}
.w4 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w4.png");
}
.w5 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w5.png");
}
.w6 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w6.png");
}
.w7 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w7.png");
}
.w8 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w8.png");
}
.w9 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w9.png");
}
.w10 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w10.png");
}
.w11 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w11.png");
}
.w12 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w12.png");
}
.w13 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w13.png");
}
.w14 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w14.png");
}
.w15 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w15.png");
}
.w16 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w16.png");
}
.w17 .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_w17.png");
}
.others .filter_icon {
  background-image: url("https://rose-link.com/0420_461_filter_others.png");
}

/*****************************************************************************************************
アプリ
******************************************************************************************************/
.apps_area {
  background-color: #fff;
  padding: 0 5px 50px 5px;
}

ul.apps {
  max-width: 1000px;
  margin: 0 auto;
  letter-spacing: -0.4em;
}

.app {
  letter-spacing: normal;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  padding: 5px;
  width: 16.66%;
}
@media only screen and (max-width: 820px) {
  .app {
    width: 25%;
  }
}
@media only screen and (max-width: 700px) {
  .app {
    width: 50%;
  }
}

.app a {
  display: block;
  box-sizing: border-box;
  border: solid 1px rgba(0, 0, 0, 0);
  border-radius: 5px;
  padding: 15px 10px 10px 10px;
  transition: border-color 0.25s;
}
.app a:hover {
  border-color: rgba(0, 0, 0, 0.25);
  transition: border-color 0.25s;
}

.app h3 {
  font-weight: 300;
  font-size: 81.3%; /*13*/
  color: #000;
  text-align: center;
  margin-top: 10px;
}

/* アプリのアイコン ***************************************/
.app .icon {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 22.5%;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.3);
  background-repeat: no-repeat;
  background-size: 60px 60px;
  background-position: 0 0;
}

.app-0102 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0102.png");
}
.app-0101 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0101.png");
}
.app-0100 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0100.png");
}

.app_0098 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0098.png");
}
.app_0097 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0097.png");
}

.app_0095 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0095.png");
}
.app_0094 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0094.png");
}
.app_0093 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0093.png");
}
.app_0092 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0092.png");
}
.app_0091 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0091.png");
}
.app_0090 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0090.png");
}
.app_0089 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0089.png");
}
.app_0088 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0088.png");
}
.app_0087 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0087.png");
}
.app_0086 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0086.png");
}
.app_0085 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0085.png");
}
.app_0084 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0084.png");
}
.app_0083 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0083.png");
}
.app_0082 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0082.png");
}
.app_0081 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0081.png");
}
.app_0080 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0080.png");
}
.app_0079 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0079.png");
}
.app_0078 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0078.png");
}
.app_0077 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0077.png");
}
.app_0076 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0076.png");
}
.app_0075 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0075.png");
}

.app_0070 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0070.png");
}
.app_0069 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0069.png");
}
.app_0068 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0068.png");
}
.app_0067 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0067.png");
}
.app_0066 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0066.png");
}
.app_0065 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0065.png");
}
.app_0064 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0064.png");
}
.app_0063 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0063.png");
}
.app_0062 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0062.png");
}
.app_0061 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0061.png");
}
.app_0060 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0060.png");
}
.app_0059 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0059.png");
}
.app_0058 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0058.png");
}
.app_0057 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0057.png");
}
.app_0056 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0056.png");
}
.app_0055 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0055.png");
}
.app_0054 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0054.png");
}
.app_0053 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0053.png");
}
.app_0052 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0052.png");
}
.app_0051 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0051.png");
}
.app_0050 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0050.png");
}
.app_0049 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0049.png");
}
.app_0048 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0048.png");
}
.app_0047 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0047.png");
}
.app_0046 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0046.png");
}
.app_0045 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0045.png");
}
.app_0044 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0044.png");
}
.app_0043 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0043.png");
}
.app_0042 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0042.png");
}
.app_0041 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0041.png");
}
.app_0040 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0040.png");
}
.app_0039 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0039.png");
}
.app_0038 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0038.png");
}
.app_0037 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0037.png");
}
.app_0036 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0036.png");
}
.app_0035 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0035.png");
}
.app_0034 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0034.png");
}
.app_0033 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0033.png");
}
.app_0032 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0032.png");
}
.app_0031 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0031.png");
}
.app_0030 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0030.png");
}
.app_0029 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0029.png");
}
.app_0028 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0028.png");
}
.app_0027 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0027.png");
}
.app_0026 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0026.png");
}
.app_0025 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0025.png");
}
.app_0024 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0024.png");
}
.app_0023 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0023.png");
}
.app_0022 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0022.png");
}
.app_0021 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0021.png");
}
.app_0020 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0020.png");
}
.app_0019 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0019.png");
}
.app_0018 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0018.png");
}
.app_0017 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0017.png");
}

.app_0015 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0015.png");
}
.app_0014 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0014.png");
}
.app_0013 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0013.png");
}
.app_0012 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0012.png");
}
.app_0011 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0011.png");
}
.app_0010 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0010.png");
}
.app_0009 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0009.png");
}
.app_0008 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0008.png");
}
.app_0007 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0007.png");
}
.app_0006 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0006.png");
}
.app_0005 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0005.png");
}
.app_0004 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0004.png");
}
.app_0003 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0003.png");
}
.app_0002 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0002.png");
}
.app_0001 .icon {
  background-image: url("https://rose-link.com/0420_461_app_0001.png");
}

/*****************************************************************************************************
フッター
******************************************************************************************************/
.footer {
  background-color: #2c2c2e;
  padding: 50px 15px;
}
.footer > div {
  max-width: 1000px;
  margin: 0 auto;
}

p.footer_copy {
  font-size: 75%; /*12*/
  color: #aaa;
}

ul.footer_link {
  font-size: 75%; /*12*/
}
ul.footer_link li {
  display: inline-block;
  vertical-align: top;
  margin: 1em 1em 0 0;
}
ul.footer_link li a {
  color: #fff;
}
ul.footer_link li a:hover {
  color: #34c759;
}